一、localStorage和sessionStorage
localStorage和sessionStorage属性允许在浏览器中存储key/value对的数据
sessionStorage用于临时保存同一个窗口(或标签也)的数据,在关闭窗口或标签也之后将会删除这些数据。
提示:如果你想在浏览器窗口关闭后还保留数据,可以使用localStorage属性,该数据对象没有过期时间,今天、下周、明年都能用,除非你手动去删除。
二、sessionStorage语法
window.sessionStorage
保存数据语法:sessionStorage.setItem("key", "value");
读取数据语法:var lastname = sessionStorage.getItem("key");
删除指定键的数据语法:sessionStorage.removeItem("key");
删除所有数据:sessionStorage.clear();
点击“登录”,立即向sessionStorage中保存了一个token值,
同时通过编程式导航,发生了一次页面的跳转。从/login跳转到/home.
为什么把token保存到sessionStorage中而不是localStorage中,这是因为localStorage是持久化的存储机制,sessionStorage是会话期间的存储机制,token只在当前网站打开期间生效。
vuex存储与localStorage、sessionStorage存储的区别:
1、vuex存储在内存中,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ) ,临时保存。
2、vuex用于组件之间的传值,localstorage,sessionstorage则主要用于不同页面之间的传值。
3、localStorage和session只能存储字符串.localStorage本质上是对字符串的读取,如果存储内容过多的话会消耗内存空间,导致页面变卡。
4、vuex用于组件之间的传值(响应式),localStorage和sessionStorage则主要用于不同页面之间的传值(其他页面更新数据后,当前页面要刷新才能相应更新,非响应式的)。因此,如果两个组件共用一个数据源,其中一个组件改变了该数据源,希望另一个组件响应该数据时,localStorage和sessionStorage无法做到。