localStorage、sessionStorage、cookie

cookie

大小: 4kb, 每个域名最多20个cookie

声明周期: 不设置过期时间情况下, 浏览器窗口关闭就消失; 设置过期时间的情况, 到期才消失

作用域: 同域可用

通信: 每次请求都会在请求间流转

localStorage

大小: 5MB

生命周期: 永久,

作用域: 同一域中localStorage共用

通信: 只保存在浏览器中, 不参与服务器通信

sessionStorage

大小: 5MB

声明周期: 当前标签页有效, 关闭当前页签或者浏览器窗口, sessionStroage即刻消失

作用域: 不同页面或标签页间无法共享sessionStorage的信息( 页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的 )

通信: 只保存在浏览器, 不参与服务器通信

注意: 在a页面打开url页面, 页面中设置sessionStorage, 这时打开一个新的标签页, 将url复制到新标签中, 发现并没有获取到sessionStorage, 但是如果使用谷歌浏览器的复制标签页功能, 能够在新打开的标签页中获取到sessionStorage 

说明: 不同浏览器无法共享localStorage或sessionStorage中的信息。

API

localStorage 和 sessionStorage具有相同的api

localStorage.setItem('name', '张三');    // 插入key为name的, 值为张三的一条localStorage
localStorage.getItem('name');           // 获取name的值
localStorage.removeItem('name');        // 将localStorage中的name移出
localStorage.clear();                   // 将loaclStorage全部清空

上述的几个方法同样适用于sessionStorage

注意: 无论是cookie、localStorage、sessionStorage存储的时候要转为字符串, 同样, 取用的时候一定要转成json再用