web本地存储：LocalStorage、SessionStorage学习

在HTML5中，新加入了一个LocalStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，
LocalStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中LocalStorage会有所不同。目前所有的浏览器中都会把LocalStorage的值类型限定为String类型，我们使用JSON类型接收时需要一些转换。

1、SessionStorage（临时存储）：为每一个数据维持一个存储区域，浏览器打开会创建，关闭浏览器就会消失。
2、LocalStorage（长期存储）：和前者一样，区别在于浏览器关闭后数据依然存在

LocalStorage使用方法：

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

• 保存

  const info = {
      name: 'Lee',
      age: 20,
      id: '001'
  };
  sessionStorage.setItem('key', JSON.stringify(info));	//JSON.stringty()  //转字符串格式
  localStorage.setItem('key', JSON.stringify(info));
  

• 获取

  var data1 = JSON.parse(sessionStorage.getItem('key'));	//JSON.parse()   // 还原原有的格式
  var data2 = JSON.parse(localStorage.getItem('key'));
  

• 删除

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

• 删除所有

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

• 监听本地存储变化

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