完全搞懂Html5本地存儲技術（一）

時間 2020-06-06

標籤完全 html5 html 本地存儲技術欄目 HTML5 简体版

原文原文鏈接

1、H5以前客戶端本地存儲的實現

一、 cookiesjavascript

cookies的應用比較普遍，但有如下幾個問題：java

（1）每次http請求頭上會帶着，浪費資源web

（2）每一個域名客戶端只能存儲4K大小 chrome

（3）會形成主Domain污染跨域

（4）cookies明文傳輸很不安全瀏覽器

二、UserData（只有IE支持）安全

三、其餘非主流方案服務器

2、H5相關的存儲知識cookie

一、本地存儲WebStorage (localstorage & sessionstorage)session

瀏覽器支持狀況

（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是永久存儲，要作好更新策略，控制過時

 
           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( 
           '已過時！' 
           ); 
          
           } 
          
           }