localStorage, sessionStorage,Cookie 三者的异同

三者都是用于将服务端的数据保存在客户端本地。只不过存放本地的内存大小，生命周期，有区别。

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage

存储方式	localStorage	sessionStorage	Cookie
存储大小	5M	5M	4K
生命周期	客户端（浏览器）永久性，localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据	客户端保存，仅在当前会话下有效，关闭页面或浏览器后被清除	客户端保存，默认关闭浏览器清除缓存，可设置清除缓存时间
使用方式	// 保存数据到 localStorage localStorage.setItem("info",data); // 从 localStorage 获取数据 let data = localStorage.getItem('info'); // 从 localStorage 删除保存的数据 localStorage.removeItem('info'); // 从 localStorage 删除所有保存的数据 localStorage.clear();	// 保存数据到 sessionStorage sessionStorage.setItem("info",data); // 从 sessionStorage获取数据 let data = localStorage.getItem('info'); // 从 sessionStorage删除保存的数据 sessionStorage.removeItem('info'); // 从 sessionStorage删除所有保存的数据 sessionStorage.clear();	原生， //js-cookie.js Cookie.set("userInfo", JSON.stringify(data));

与stroe 状态搭配使用。不使用 stroe，可能会存在登陆成功后locaStorage .sessionStorage 客户端保存数据，无法实时刷新js缓存的情况。还是上一次的缓存。

// 设置stroe.js 
import Vue from "vue";
import Vuex from "vuex";
import Cookie from "js-cookie";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    //用户信息
    userInfo: {},
    //接口响应loading
    loading: {
      lock: false,
      text: ""
    }
  },
  mutations: {
    //设置用户登录信息
    setUserInfo(state, res) {
      state.userInfo = res;
      // sessionStorage.setItem("userInfo", JSON.stringify(res));
      Cookie.set("userInfo", JSON.stringify(res), { expires: 1 });
    }
  },
  actions: {},
  modules: {}
});

//main.js 配置
import store from '../store';
new Vue({
  store,
  render: h => h(App)
}).$mount("#app");


//登陆成功，保存info信息
this.$store.commit("setUserInfo", res.data.data);

axios.js 页面调用 
import store from '../store';
     store.state.userInfo

查询资料补充：

本地储存localStorage与cookie的区别

1，cookie在浏览器与服务器之间来回传递

sessionStorage和localStorage不会把数据发给服务器，仅在本地保存
2，数据有效期不同
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage 始终有效，长期保存
3，cookie数据还有路径的概念，可以限制cookie只属于某个路径下
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
4，作用域不用
sessionStorage不在不同的浏览器窗口中共享
localStorage在所有同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便

sessionStorage、localStorage和cookie的区别
1）相同点是都是保存在浏览器端、且同源的
2）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
3）存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
4）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
5）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
6）web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
7）web Storage的api接口使用更方便

参考： https://blog.csdn.net/weixin_42614080/article/details/90706499