LocalStorage And SessionStorage

Web存储对象localStorage和sessionStorage允许我们在浏览器上保存键/值对。同时localStorage与sessionStorage同属于window下的只读属性，它们允许你访问一个源（origin）的对象Storage。

localStorage介绍

localStorage特性

1. localStorage扩展了cookie4K的大小限制；
2. localStorage会永久性存储在浏览器本地存储中；
3. localStorage存储类型为string类型，数组、对象等常见格式需要进行转换。
4. localStorage无法被爬虫抓取，并且在隐私模式下无法读取；

localStorage方法与属性

1. localStorage使用时，需要判断浏览器是否支持该属性；

   if (!window.localStorage) {
     alert('浏览器不支持localStorage');
     return false;
   } else {
     return true;
   }
   

2. localStorage的三种写入方法；

   var storage = window.localStorage;
   storage["a"] = 1;
   storage.b = 2;
   storage.setItem('c', 3);
   

3. localStorage的三种获取方法；

   var storage = window.localStorage;
   var a = storage["a"];
   var b = storage.b;
   var c = storage.getItem('c');
   

4. localStorage的三种清除方法；

   window.localStorage.clear(); //全部清除
   window.localStorage.setItem(key, '');//清除对应键key的值
   window.localStorage.removeItem(key);//移除对应键key的键值对
   

5. localStorage的其他方法属性

   /**
   *  localStorage有继承Object原型链上的属性与方法
   */
   window.localStorage.length; //获取键值对的长度
   window.localStorage.key(index); //获取索引下的键名
   

sessionStorage介绍

sessionStorage特性

1. sessionStorage在浏览器打开期间一直保持，并且不受重新加载和恢复页面影响；
2. sessionStorage与cookie的运行方式不同，在新标签或者新窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文；
3. 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage;
4. 关闭对应浏览器窗口或者tab页面，会清除对应的sessionStorage;

sessionStorage方法与属性

同localStorage一样，sessionStorage同样具有key()、getItem()、setItem()、clear()、removeItem()等方法，并且操作方式一样。

总结与使用

1. localStorage可以用来存储同源情况下不需要经常变动的数据或者常量数据；

   window.localStorage.setItem('access_token', 'token数据');
   window.localStorage.setItem('role_types', '角色类型数据');
   

2. localStorage可以和vuex或者redux等全局变量配合使用，达到全局变量持久化的效果；

3. sessionStorage可以用来存储同源情况下不关闭浏览器会话时的临时数据，用户会话的数据共享；

4. sessionStorage可以起到分离浏览器窗口数据的作用；

5. 可以利用监听storage的变化进行相关的业务操作；

    window.addEventListener("storage", function(ev){
               console.log("更新了缓存",ev);
               if (ev.key == 'identityInfo') {
                   // removeItem同样触发storage事件，此时ev.newValue为空
                   if(ev.newValue !== ev.oldValue) {
                     //TODO 
                   }
               } else if ( ev.key === null && ev.newValue === null && ev.oldValue === null) {
                  //如果其他标签页清空了本地存储，可以在此处进行操作
               }
           });
   

参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
https://www.runoob.com/jsref/prop-win-localstorage.html