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

posted @ 2020-11-23 11:35  健身编程Dog  阅读(148)  评论(0编辑  收藏  举报