window.sessionStorage

一、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无法做到。

 

---

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。