总结本地存储几种方式

最近学习了本地存储几种方式各自的特色和区别，遂记录下来，以加深印象。

1、cookie

cookie算是比较早的技术，最初是为了记录http的状态，提升访问速度。cookie是服务器"种植"在客户端的key-value形式文本文件。但同时客户端也能操做cookie。
特色：

• 大小：cookie的大小限制在4k。每一个域名下cookie的个数如今在20个。
• 在客户端请求服务器端和服务器响应时，cookie始终被携带在http请求中，即便不须要(形成流量浪费)。这也是限制cookie大小的缘由。
• 客户端能够经过document.cookie操做cookie，并不安全。
• cookie能够设置过时时间、路径、域和httpOnly等字段。若是设置了过时时间，cookie会保存在硬盘里，知道到了设定的过时时间才会失效。若未设置过时时间，在浏览器窗口关闭时，cookie就失效了。路径和域两个字段限制了cookie的做用范围。httpOnly设置为true，则js不能经过document.cookie操做cookie。

2、localStorage

它也是采用key-value的形式存储数据，可是它与cookie有很大的区别
特色：

• 对比着来，localStorage能保存更大的数据，标准浏览器是5Mb。
• localStorage保存在客户端，不随着请求发送给服务器，避免了流量的浪费。
• 客户端能够经过：setItem、getItem方法访问localStorage。
• 而且，localStorage没有过时时间，若是不手动清除，数据就永远不会过时，一直保存在浏览器当中。
• 存储的信息在同一域中是共享的。

3、sessionStorage

特色：

• 与localStorage不一样的是，sessionStorage并不持久化，在窗口关闭那一刻，sessionStorage会被清除。
• 存储的信息是会话级别的，同域也是不能共享的。关闭当前标签页，sessionStorage即失效。

4、session(附加)

上面提到了cookie，顺带提一下session。客户端第一次访问服务器，服务器种植一个cookie，保存惟一的sessionId。后面客户端再次访问，会读取此sessionId，随即能在服务端读取到此id保存的会话对象。
特色：

session是基于cookie的，因为session在客户端不可被修改，相对于cookie来讲安全，因此可存放一些重要数据。
数据保存在服务器端，客户端经过sessionId，读取到相对应的数据。

5、用法

对浏览器来讲，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，并且容量更大，它包含两种：localStorage 和 sessionStorage
sessionStorage（临时存储） ：为每个数据源维持一个存储区域，在浏览器打开期间存在，包括页面从新加载
localStorage（长期存储） ：与 sessionStorage 同样，可是浏览器关闭后，数据依然会一直存在
sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

1. 保存数据到本地

const info = {
    name: 'Lee',
    age: 20,
    id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

2. 从本地存储获取数据

var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

3. 本地存储中删除某个保存的数据

sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.删除全部保存的数据

sessionStorage.clear();
localStorage.clear();

5. 监听本地存储的变化
Storage 发生变化（ 增长、 更新、 删除） 时的 触发， 同一个页面发生的改变不会触发， 只会监听同一域名下其余页面改变 Storage

window.addEventListener('storage', function(e) {
    console.log('key', e.key);
    console.log('oldValue', e.oldValue);
    console.log('newValue', e.newValue);
    console.log('url', e.url);
})

6.数组例子

/*本地存储保存数组*/
var list = []
list1 = 1
list2 = 2
list.push(list1)
list.push(list2)
list = JSON.stringify(list);
localStorage.setItem("list", list);
/*获取*/
var list = eval(decodeURIComponent(localStorage.getItem("list")))
list1 = list[0]
list2 = list[1]
/*清除指定*/
localStorage.removeItem("lastname");