完全搞懂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( 
           '已过时！' 
           ); 
          
           } 
          
           }

子域名之间是不能共享数据的-使用跨域方法传输数据

特别注意：

webstorage虽好可是并非用来彻底替代cookies，它应该用在本来不该该用cookies可是不得已用了cookies的状况下。

有WebStorage后cookie应只作它应该作的事情——做为客户端与服务器交互的通道，保持客户端状态。