cookie、sessionStrorage、localStrorage、indexDB

存储

特性	cookie	sessionStrorage	localStrorage	indexDB
数据生命周期	一般是由服务器生成，可以设置过期时间。	页面关闭就清除 （会话级存储）	一直存在，除非手动删除。（永久存储）	一直存在，除非手动删除。
数据存储大小	4k	5M	5M	不限
与服务器端通信	每次都会携带在header中，对于请求性能有影响。	不参与	不参与	不参与

 关于项目中使用过的一个beforeEach配合sessionStrorage做一个登录跳转验证

// 登录请求（这段代码是状态机中的actions中的一个登录请求）

    Login(context, item) {

      axios.post("/admins/login", item.ruleForm).then(res => {

        console.log(res.data);

        if (res.data.length == 1) {

          {

            sessionStorage.setItem("accessToken", res.data[0].account);

          }

          item.router.push({

            path: "/system",

            name: "system",

            query: {

              _id: res.data[0]._id,

              position: res.data[0].position

            }

          });

        } else {

          alert("账号错误请重新输入");

        }

      });

    }

//下面这段代码放置在main.js中

router.beforeEach((to, from, next) => { 

  // to即将进入的目标路由对象，from当前导航正要离开的路由， next : 下一步执行的函数钩子

  if(to.path === '/register'||to.path === '/login') { next() } // 如果即将进入登录或者注册路由，则直接放行

   else { //进入的不是登录路由

       if(!sessionStorage.getItem('accessToken')) {next({ path: '/login' })}

    //  下一跳路由需要登录验证，并且还未登录，则路由定向到 登录路由

     else { next() }}

    // 如果不需要登录验证，或者已经登录成功，则直接放行

})

对原生本地存储进行了封装，使用的时候直接调用方法

// 存储 storage
function setStorage(key, value) {
    localStorage[key] = JSON.stringify(value);
}

// 获取 storage
function getStorage(key) {
    let data = localStorage[key];
    if (data) {
        return JSON.parse(data);
    }
    return [];
}