前端數據緩存

時間 2019-11-21

標籤前端數據緩存简体版

原文原文鏈接

　　在前端開發中有些數據能夠在第一次請求的時候所有拿過來保存在緩存對象，方便使用的時候不用每次去請求服務器，這種方法能夠極大地減小對服務器的訪問從而提升頁面加載速度。html

1、全局變量緩存前端

父頁面從服務器獲取到基礎數據存儲在一個全局對象中當子頁面須要此信息時直接獲取父級對象信息從而減小HTTP請示鏈接數此方式涉及到做用域問題需找準當前做用域問題 html5

<head>

//定義全局緩存變量

var Cache = {

BaseInfo: {}

};

//設置緩存數據

Cache.BaseInfo.Name = "Tom";

Cache.BaseInfo.Age = 20;

</script>

</head>

<body>

</body>

<head> <meta charset="UTF-8"><web

meta name="viewport" content="width=device-width, initial-scale=1.0">數據庫

<title>子級頁面信息</title>

function GetBaseInfo() {

document.getElementById("show").innerHTML = parent.parent.Cache.BaseInfo.Name;

}

</script>

</head>

<body>

</body>

二、Cookie緩存瀏覽器

cookie是以鍵值對的形式保存的，即key=value的格式。各個cookie之間通常是以「;」分隔。cookie是瀏覽器提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。能夠由JavaScript對其進行控制，而並非JavaScript自己的性質。cookie是存於用戶硬盤的一個文件，這個文件一般對應於一個域名，當瀏覽器再次訪問這個域名時，便使這個cookie可用。所以，cookie能夠跨越一個域名下的多個網頁，但不能跨越多個域名使用。緩存

cookie機制將信息存儲於用戶硬盤，所以也能夠做爲全局變量，它能夠用於如下幾種場合。安全

（1）保存用戶登陸狀態（2）跟蹤用戶行爲（3）定製頁面（4）建立購物車。服務器

cookie的缺點主要集中於安全性和隱私保護。主要包括如下幾種： cookie

（1）cookie可能被禁用，安全係數較低。
（2）cookie是與瀏覽器相關的。容量很小（4K之內）取決於瀏覽器
（3）cookie可能被刪除。
（4）cookie增長了網絡負擔通信時會攜帶全部cookie
（5）cookie原生操做也不方便增刪改都要‘document.cookie=’

<head>

document.cookie = "Name=Tom;";

</script>

</head>

<body>

</body>

<head>

<title>子級頁面信息</title>

function GetBaseInfo() {

var c = document.cookie.split(";")[0];

document.getElementById("show").innerHTML = c.substring("Name=".length, c.length);

}

</script>

</head>

<body>

</body>

cookie 增冊改相關就不在這演示了

三、HTML 5 Web 存儲

html5提供了兩種客戶端存儲數據的新方式
a.localStoragelocalStorage生命週期是永久，意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
b.sessionStorage 僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放數據大小爲通常爲5MB,並且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。
優勢：
（1）增大了傳統cookie的容量限制
（2）不參與和服務器的通訊
缺點：
（1）瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性
（2）目前全部的瀏覽器中都把localStorage的值類型限定爲string類型若在存儲即要將對象轉化爲字符串
（3）localStorage在瀏覽器的隱私模式下面是不可讀取的
（4）localStorage數據不能被爬蟲抓取到而且存儲內容多的話會消耗內存空間，會致使頁面變卡
（5）localStorage存儲沒有時間限制即永不過時需手動清理緩存信息

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>localStorage</title>
<script>
window.onload = function() {
//判斷是否支持localStorage本地存儲
if (window.localStorage) {
//設置本地存儲
localStorage.setItem("name", "Tom");
localStorage.setItem("age", "20");
//獲取本地存儲
console.log(localStorage.getItem("name"));
console.log(localStorage.getItem("age"));
//刪除單個緩存
localStorage.removeItem("name");
//消除全部緩存
localStorage.clear();
}
}
</script>
</head>

因爲Local Storage 本地存儲存在永不過時問題故在使用時若要知足幾天後過時剛須要自定義過時時間變量與當前系統時間進行比較若過時後刪除LocalStorage鍵或更新值。Session Storage與LocalStorage用法一致惟一區別在於LocalStorage永久存儲 SessionStorage直在當前會話狀態下有效此處就不過多的演示了

注：不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的 localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。頁面及標籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的.

4、WebSQL
WebSQL是前端的一個獨立模塊，是web存儲方式的一種，只是通常不多使用。而且，當前只有谷歌支持，ie和火狐均不支持。
Web SQL Database 規範中定義的三個核心方法：