一、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是永久存储，要做好更新策略，控制过期

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应只做它应该做的事情——作为客户端与服务器交互的通道，保持客户端状态。

转载于:https://www.cnblogs.com/wenJiaQi/p/6161147.html

彻底搞懂Html5本地存储技术（一）相关推荐

HTML5 本地存储和内容按需加载的思路和方法
HTML5 本地存储和内容按需加载的思路和方法作者:佚名字体:[增加减小] 来源:互联网时间:04-07 16:05:09 我要评论本文将着重介绍HTML5本地存储和内容按需加载的思路和方法 ...
HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
HTML5 本地存储 localstorage 安全分析
在HTML5本地存储出现以前,WEB数据存储的方法已经有很多,比如HTTP Cookie,IE userData,Flash Cookie,Google Gears.其实再说细点,浏览WEB的历史记录 ...
HTML5 本地存储
HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性参考文献本地持久化存储一直是本 ...
HTML5本地存储之Web Storage篇
2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...
HTML5本地存储不完全指南
历史在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择: HTTP cookie.HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服 ...
html5储存类型,html5本地存储-留言板
HTML5每日一练之JS API-本地存储LocalStorage 留言板 | 前端开发网(W3Cfuns.com)! var Storage = { saveData:function()//保存数 ...
HTML5本地存储——IndexedDB（二：索引）
在HTML5本地存储--IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器--索引. 熟悉数据库的同学都知道索引的一个好处 ...
HTML5本地存储——IndexedDB
在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

彻底搞懂Html5本地存储技术（一）

一、H5之前客户端本地存储的实现

彻底搞懂Html5本地存储技术（一）相关推荐

最新文章

热门文章