JS前端持久化存储 HTML5 WebStorage

cookie

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage

为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
2、

api

sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

• 保存数据到本地

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

• 从本地存储获取数据

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

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

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

• 删除所有保存的数据

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

• 监听本地存储的变化

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);
    })

3、