一、H5之前客戶端本地存儲的實現
1、 cookies
cookies的應用比較廣泛，但有以下幾個問題：
（1）每次http請求頭上會帶着，浪費資源
（2）每個域名客戶端只能存儲4K大小
（3）會造成主Domain污染
（4）cookies明文傳輸很不安全
2、UserData（只有IE支持）
3、其他非主流方案
二、H5相關的存儲知識
1、本地存儲WebStorage (localstorage & sessionstorage)
瀏覽器支持情況
（1）生命周期
- localstorage永久存儲除非顯示移除或清空，sessionstorage在頁面會話期有效關閉頁面會被清除（刷新頁面不會清除）；
（2）API（ls和ss相同）
- length //storage內鍵值對數量 只讀
- setItem //添加鍵值對 key value
- getItem //根據key獲取鍵值對
- key //鍵名 可以根據index屬性獲取鍵名
- removeItem //根據key移除鍵值對
- clear //清空
（3）存儲類型及大小
- webStorage之存儲字符串（只要能被序列化為字符串都可以）
- 每個域名下5M
（4）storage事件
webStorage發生改變時觸發storage事件
- key:鍵名
- oldValue：修改之前的value
- newValue：修改之后的value
- url：觸發改動的頁面url
- StorageArea：發生改變的Storage
(5)使用注意事項
- 不同瀏覽器數據存儲是相互獨立的，chrome的localStorage在ff上訪問不了
- 使用時要檢測瀏覽器是否支持（不要使用window.localStorage檢測對象是否存在，應該set一條數據然后進行異常捕獲）
- 由於ls是永久存儲，要做好更新策略，控制過期
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function
set(key,vel){
var
curTime =
new
Date().getTime();
localStorage.setItem( key , JSON.stringify({data:vel , time:curTime }) );
}
function
get(key,exp){
var
data = locaStorage.getItem(key);
var
dataObj = JSON.parse(data);
if
(
new
Date().getTime()-dataObj.time<exp){
return
dataObj.data;
}
else
{
alert(
'已過期！'
);
}
}
|
- 子域名之間是不能共享數據的-使用跨域方法傳輸數據
特別注意：
webstorage雖好但是並不是用來完全替代cookies，它應該用在原本不應該用cookies但是不得已用了cookies的情況下。
有WebStorage后cookie應只做它應該做的事情——作為客戶端與服務器交互的通道，保持客戶端狀態。