Cookies | localStorage | sessionStorage | vuex

之前在项目中需要做个一个保存用户信息的功能，脑子了一下蹦出了Cookies，Session，localStorage，sessionStorage，还有vuex，这里记录一下它们的异同之处；

 

Vuex

首先说说vuex吧，其实vuex中的数据就是根组件的全局变量，项目结构没有修改的话，即是App.vue的全局变量。也就是说，当App.vue刷新时，vuex中的数据就会重新初始化(也就是导致数据丢失的原因)，一般来说，在App.vue下的路由/子路由来回跳转的时候，是不会刷新的，只是挂载在App中的组件发生了变化，并不是刷新页面，这里也是我一开始学习时的一个误解。但是当我们的跳转时使用了window.href.location / target = '_blank' 等会打开新窗口的动作，页面便刷新了，vuex中的数据会重新初始化。 

 

Cookies和Session

Cookies储存在客户端，如果不设置过期时间，则默认在关闭浏览器时清除。

Session储存在服务器，不同服务器有不同的默认失效时间，也可以调用invalidate手动清除。

在我自己的项目中，我改用了Cookies来保存用户信息，但是也有缺点，Cookies是以字符串的形式储存的，因此需要自己封装处理方法。

 

localStorage和sessionStorage

1、生命周期：

localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。同源即 协议、域名、端口号都相同的url

比如说我在http://localhost:8080/data 设置了sessionStorage，下面几种情况：

• 刷新http://localhost:8080/data，sessionStorage不丢失。
• 从该页面点击进入 http://localhost:8080/article/detail?art_id=2 ，sessionStorage不丢失。在该页面再刷新，sessionStorage不丢失。
• 新窗口进入http://localhost:8080/data，sessionStorage丢失。

2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB

3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

根据localStorage和sessionStorage和特点来看，sessionStorage并不适合持久保存用户信息，比如一个用户关闭了所有页面，又单独打开了 http://localhost:8080/article/detail?art_id=2这篇文章，用户信息是会丢失的。相比较下，localStorage可以持久保存信息。