localStorage 本地存储（sessionStorage、cookie）

window.localStorage：

　　（翻译：窗口的本地存储）

　　体积5M，据说未来还会增大

　　生命周期，只要不清都在

　　在localStorage中只能以字符串的形式进行保存，所以在存入localStorage之前，我们需要将json格式的数据进行转化成string格式。

获取对象：

var storage=localStorage;  // 全局属性，所以 window. 可以省略

三种写入方式：

　　localStorage.setItem( 'key', 'value‘ )  // 对象需要用JSON.stringify(obj) 包起来，

    //写入a字段     
    storage["a"]=1;     
    //写入b字段     
    storage.b=1;     
    //写入c字段     
    storage.setItem("c",3);

三种读取方式：

　　localStorage.getItem( ' key ' )

    //第一种方法读取     
    var a=storage.a;     console.log(a);     
    //第二种方法读取     
    var b=storage["b"];  console.log(b);     
    //第三种方法读取     
    var c=storage.getItem("c");

删除：

　　localStorage.removeItem( 'key' )

清空：

　　localStorage.clear( )

onstorage( ) 事件：

　　当本地缓存修改的时候，自己不触发，兄弟（旁边）页面触发

sessionStorage：

　　sessionStorage 的所有方法和 localStorage 一样。

　　sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问。并且当会话结束后（关闭页面）数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。只允许同一窗口访问。

　　而 localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改 localStorage 数据。

Cookie、 sessionStorage、localStorage 的异同

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

 

2018-12-14