前端常用的存储数据的方式有2种:
本地存储:(localstorage、sessionstorage、cookie)
Vuex容器:(state、geeter、mutations、action、modules)
vuex存储在内存;
localstorage(本地存储)则以文件的方式存储在本地,永久保存;
sessionstorage( 会话存储 ) ,临时保存。
localStorage和sessionStorage只能存储字符串类型,
对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
Vuex容器与本地存储的区别:
1、实质的区别
vuex存的是状态,存储在内存,localstorage是浏览器提供的接口,让你存的是文件,以文件的形式存储在本地2、应用场景
vuex用于组件之间的传值,localstorage则主要用于页面之间的传值3、永久性
当刷新页面时,vuex存储的值会丢失,localstorage不会4、响应式
localstorage无法做到响应式,vuex可以绑定数据响应式。
总结:使用vuex容器存储数据时,可以配合localstorage(sessionStorage)来存储到本地,实现持久化数据
localStorage.setItem(key, String), set的值必须是字符串,如果你的数据是对象都需要先行转换(JSON.stringify(xxx)),取出时localStorage.getItem(key),取出后的字符串可以通过JSON.parse(xxx) 转回对象。
保存token的方法
获取token的方法
localstorage、sessionstorage、cookie的区别?
1. sessionStoragesessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
2. localStorage
localStorage 方法存储的数据没有时间限制。3. cookie
cookie和session都是用来跟踪浏览器用户身份的会话方式。
cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。
但是cookie的大小限制在4kb左右,并且安全性较低,它存在客户端