Web Storage：h5新增本地存储，类似于cookie，用于存储页面数据的，最大不能超过5M，不同浏览器有差异；不兼容ie8及以下浏览器；Web Storage包含了两种对象：sessionStorage和localSotrage。这两个对象在支持的浏览器中都是以windows对象属性的形式存在的。
sessionStorage、localSotrage的区别：
sessionStorage：存储在当前会话页面，页面关闭，数据清除；
localStorage：持久化本地存储，没有时效限制；
常用方法
localStorage.setItem(key,val); //存储数据
localStorage.getItem(key,val); //获取数据
localStorage.reamoveItem(key) //删除指定项
localStorage.clear(); //删除所有存储数据
localStorage.key(); //得到某个索引的key
注意：storage存储在相应的域名下面的，跨域是没法调用的,;localStorage.length查看个数；
键/值对通常以字符串存储，你可以按自己的需要转换该格式。可以使用JSON.stringfy, JSON.parse完成json存储；
cookie的使用
（1）不同的浏览器存储cookie的位置不同，不能统一
（2）cookie以域名为单位，不同域名下存储的cookie是独立的，可以设置子域下的cookie
(3) 不同浏览器，最多可以放20条cookie,每条最大容量为4k；不同浏览器有所不同；
（4）默认有效期为会话期，也可以设置cookie的有效期；
方法
document.cookie = '名字=值';
document.cookie = 'username=cfangxu;domain=baike.baidu.com'//并且设置了生效域
备注：如果想在客户端即网页中通过 js 去设置secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie。
三者的异同
Cookie 一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭后失效；大小一般为4kb；Cookie 每次都会携带HTTP头中，如果使用cookie保存过多数据会带来性能问题；Cookie 需要程序员自己来封装，原生的cookie接口不够友好
网友评论