一，localStorage

1- 设置 localStorage

localStorage.setItem('username','JonasL')

2- 读取 localStorage

localStorage.getItem('username')

3- 删除localStorage

localStorage.removeItem('username')

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远存在的。

不同浏览器无法共享localStorage或sessionStorage中的信息。

相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息

二，sessionStorage

1- 设置 sessionStorage

sessionStorage.setItem('username','JonasLee')

2- 读取 sessionStorage

sessionStorage.getItem('username')

3- 删除localStorage

sessionStorage.removeItem('username')

==============================

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

三、如何实现 sessionStorage 的监听，实现数据响应式

在开发过程中，组件中的随时可能改变的数据有的是缓存到sessionStorage里面的，但是有些组件取seesionStorage中的值时，并不能取到更新后的值。

 接下来就说一下，当seesionStorage的值发生改变时，如何实现组件中的seesionStorage的值实时更新 ，也就是seesionStorage的“响应式”

1、首先在main.js中给Vue.protorype注册一个全局方法，其中，我们约定好了想要监听的sessionStorage的key值为’watchStorage’，然后创建一个StorageEvent方法，当我在执行sessionStorage.setItem(k, val)这句话的时候，初始化事件，并派发事件。

Vue.prototype.resetSetItem = function (key, newVal) {

   if (key === 'watchStorage') {

       // 创建一个StorageEvent事件

       var newStorageEvent = document.createEvent('StorageEvent');

       const storage = {

           setItem: function (k, val) {

               sessionStorage.setItem(k, val);

               // 初始化创建的事件

               newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);

               // 派发对象

               window.dispatchEvent(newStorageEvent)

           }

       }

       return storage.setItem(key, newVal);

   }

}

2、如何触发？

在一个路由(比如路由A)存储值得时候，使用下面的方法：

this.resetSetItem('watchStorage', this.value);

3、如何监听

如果在另外一个路由(比如路由B)中，我们想根据watchStorage的变化来请求接口刷新页面数据的时候，可以在这个路由中created钩子函数中监听

window.addEventListener('setItem', ()=> {

    this.newVal = sessionStorage.getItem('watchStorage');

})

四，页面如何设置超时时间，清除缓存操作

这里通过清除菜单里面各个模块下面路径的缓存实现超时效果，

getPath(name) {

        var date1=sessionStorage.getItem("dtstart");

        var date2 = new Date();

        var date3 = date2.getTime() - date1;

        var days=Math.floor(date3/(24*3600*1000))

        var leave1=date3%(24*3600*1000);

        var hours=Math.floor(leave1/(3600*1000));

        var leave2=leave1%(3600*1000)     

        var minutes=Math.floor(leave2/(60*1000))

        if(days>0||hours>0||minutes>30){

            sessionStorage.removeItem("menuList");

            sessionStorage.removeItem("userName");

            sessionStorage.removeItem("institutionId");

            sessionStorage.removeItem("institutionName");

            sessionStorage.removeItem("marketplace_type");

            sessionStorage.removeItem("phone");

            sessionStorage.removeItem("name");

            sessionStorage.removeItem("userMail");

            sessionStorage.removeItem("jobContent");

            sessionStorage.removeItem("userJob");

            sessionStorage.removeItem("tokey");

            sessionStorage.removeItem("dtstart");

            this.$router.push({

              path: "/",

              //path:"/page/home",

              query: {

              }

            });

        }else{

          sessionStorage.setItem("dtstart", new Date().getTime());

        }

      var path = this.urlMap.get(name);

      if (path) {

        return path;

      }

      return "";

    }