vue使用cookie、localStorage和sessionStorage储存数据

一，cookie

这里使用js-cookis：安装：npm install js-cookie --save

在main.js中引入

import jsCookie from 'js-cookie'

Vue.prototype.$cookie = jsCookie

把他放在Vue原型l里, 在页面组件里可直接用 this.$cookie调用

在其他js文件中Vue.prototype.$cookie调用。

支持各种语法数据的存储：简单使用如下：

this.$cookie.get('username')
this.$cookie.remove('username')
this.$cookie.set('username', 'liu')

二，localStorage

不需要引入插件：简单使用，也可以存储其他数据类型。不再列举
localStorage.setItem('userName','HelloWeen')
localStorage.getItem('userName')
localStorage.removeItem('userName')

三，sessionStorage

比较常用的存储方式。不需要引入插件：简单使用

sessionStorage.getItem(key) //返回键名(key)对应的值(value)。若没有返回null。
sessionStorage.setItem(key, value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
sessionStorage.removeItem(key) //将指定的键名(key)从 sessionStorage 对象中移除。
sessionStorage.clear() //清除 sessionStorage 对象所有的项。

sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

var userEntity = {
    name: 'zhengtian',
    age: 24
};
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);

四，三者比较、区别

1、sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。（如果后端认证采用的是携带token方式进行认证，sessionStorage 可以实现一个浏览器登录多个不同的账号，每个页面登录一个账号（看截图原因）） 

2、如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 改数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

3、cookie在这方面比较灵活，可以设置过期时间，默认是1天。（如果后端认证采用的是携带token方式进行认证，token保存到cookie中可以实现一个浏览器登录一个账号，每打开新的页面都是登录状态（只要token未过期）），后端session认证也是一样一个浏览器登录一个账号。每个新tab都是登录状；缺点不易储存大数据。

sessionStorage简单好用，cookie要安装插件，稍麻烦一点，localStorage永久保存有时候觉得不安全。看情况使用以上三种存储方式。

session、cookie和token的区别

cookie机制
​web应用程序是使用HTTP协议来传送数据的。而HTTP是无状态的协议。所以一旦HTTP报文交换完成，客户端和服务器端就会谁也不认识谁了，这意味着服务器无法从连接上跟踪会话。即当用户A购买了一件商品并放入购物车中，当再次购买该商品时，服务器已经无法判断是哪个用户的会话了，所以才必须引入一种机制用于跟踪会话。

​cookie就是这样的一种机制。因为HTTP是无状态的，服务器是无法单单仅凭网络连接是无法知道客户身份的。所以这个时候服务器就会给客户端发一个通行证，每个客户端一个，无论谁访问都必须携带自己的通行证，这样服务器就能从通行证上确认客户的身份。

​而这样的通行证，也就是cookie，实际上是一小段文本信息。当客户端请求服务器后，如果服务器需要记录该用户状态，就会使用response回复报文向客户端颁发一个通行证cookie。而客户端收到cookie后会将cookie保存起来，当浏览器再次请求该网页时，浏览器会连同cookie一同交给服务器。服务器检查该cookie，以此辨认用户状态。

Session机制
Session是另一种记录客户状态的机制，不同的是cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。
这就是session。当客户端浏览器再次访问时只需要从该session中查找客户的状态就可以了。

token
token 的认证方式类似于临时的证书签名, 并且是一种服务端无状态的认证方式, 非常适合于 REST API 的场景. 所谓无状态就是服务端并不会保存身份认证相关的数据。

分布式情况下的session和token
我们已经知道session是有状态的，一般存于服务器内存或硬盘中，当服务器采用分布式或集群时，session就会面对负载均衡问题。负载均衡多服务器的情况，不好确认当前用户是否登录，因为多服务器不共享session。
这个问题也可以将session存在一个服务器中来解决，但是就不能完全达到负载均衡的效果。当今的几种解决session负载均衡的方法。
而token是无状态的，token字符串里就保存了所有的用户信息。token可以很好解决负载均衡多服务器问题。

总结
session存储于服务器，可以理解为一个状态列表，拥有一个唯一识别符号sessionId，通常存放于cookie中。服务器收到cookie后解析出sessionId，再去session列表中查找，才能找到相session。依赖cookie.
cookie类似一个令牌，装有sessionId，存储在客户端，浏览器通常会自动添加。
token也类似一个令牌，无状态，用户信息都被加密到token中，服务器收到token后解密就可知道是哪个用户，需要开发者手动添加。