Vue项目代码改进（三）—— Cookie、LocalStorage和SessionStorage的使用

存在问题：
如果在退出页面时，没有点击“退出”按钮，而是直接关闭页面，token并没有被清除，依然能通过访问http://localhost:8080/#/ 直接进入主页。
原因：
使用了localStorage而非sessionStorage或Cookie

一、基本概念

1. Cookie（HTML4的本地存储 cookie）

Cookie非常小，大小在4KB左右。主要用途是保存登录信息，比如登录一个网站市场，是可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨识用户身份的数据来实现的。

Cookie机制：
（1）如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随着关闭而结束，这种cookie简称cookie会话。
（2）如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据依然存在，直到过期时间结束才消失。

缺点：
（1）大小受限
（2）用户可以操作（禁用）cookie，使功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端。
（5）每次访问都要传送cookie给服务器，浪费带宽。
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

HTML5中与本地存储相关的两个重要内容：Web Storage与本地数据库。其中，Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

2. LocalStorage（ HTML5的本地存储）

将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

3.SessionStorage（ HTML5的本地存储）

将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

localStorage与sessionStorage对比
1、生命周期：
localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。sessionStorage只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5、获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。
6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；

二、对比

在这里插入图片描述

三、使用

Cookie1： vue-cookies安装 npm install vue-cookies --save使用  import VueCookies from 'vue-cookies'    Vue.use(VueCookies)API   this.$cookies.set(keyName,value)   this.$cookies.get(keyName)   this.$cookies.remove(keyName)2：js-cookie安装   npm install js-cookie --save 使用   import  Cookies  from  'js-cookie'API  Cookies.set('keyName',value)   Cookies.get(keyName)    Cookies.remove(keyName)在Cookie中存对象后取出的时候需要把字符串转成json格式   const  liaUser  =   JSON.parse(Cookies.get("user"))

LocalStorage和sessionStorage具有相同的操作方法1：sessionStorage.setItem("key“，“value”)2：sessionStorage.getItem("key")3：sessionStorage.removeItem("key“)4：sessionStorage.clear()5：点操作和[]操作 sessionStorage.key = "value"     sessionStorage["key"] = "value"

这篇文章讲的挺详细的：cookies、sessionStorage和localStorage解释及区别