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