cookie 操作记录& vuex 中页面刷新 state 数据丢失的问题

1. 在vue 中创建一个util.js 文件保存如下cookie 操作，在使用的时候，只需要直接引入就可操作，这里记录下来，以后可以方便的使用

//获取cookie、
    export function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
        return (arr[2]);
        else
        return null;
   }
 
   //设置cookie,增加到vue实例方便全局调用
   export function setCookie (c_name, value, expiredays) {
        var exdate = new Date();
        exdate.setDate(exdate.getDate() + expiredays);
        document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
   };
 
    //删除cookie
    export function delCookie (name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        var cval = getCookie(name);
        if (cval != null)
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
   };

 

2. 今天在进行vuex 操作的时候，遇到一个问题，就是保存在vuex 中的数据，在别的页面中无法取到对应的值，因为好久没有做vue 的项目了，一开始还以为自己调用方法写错了，最后发现，是自己使用了url 来直接 访问，这样就会形成实际的页面刷新，所以数据取不到。一直调试了很久，后来有一次使用了页面的导航来访问别的页面，就能取到 vuex 中保存的值了。因为vue-router 使用的是history 的页面无刷新方式来形成路由映射，访问到对应的页面。当使用url 在地址栏直接回车来访问的时候，就形成了实际的页面刷新。要解决这个问题，可以在页面将要卸载时，先把vuex 中的state 保存到本地，然后再页面再次加载的时候，使用本地的数据替换vuex 中的state。这样就可以了，使用sessionStorage 或者 localStorage 来保存都是可以的。具体如下：

 

export default {
  name:"App",
  created() {

    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("tastore")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("tastore"))
        )
      );
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("tastore", JSON.stringify(this.$store.state));
      
    });
  },
};

以上代码经过测试，可以放心使用