存在问题：
如果在退出页面时，没有点击“退出”按钮，而是直接关闭页面，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解释及区别

写到这里，解决最初的问题只需将所有的localStorage替换成sessionStorage就好了

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

  1. Vue项目代码改进（六）—— vue的mixins的使用

    混入可以将不同组件的共同内容部分在一个混入对象中展示,然后通过在组件实例中混入这个对象,这样拥有这些属性的组件都可以调用 混入对象中的属性名跟组件中的属性名冲突时,以组件自身的为基准 举例:单文件组件 ...

  2. Vue项目代码改进（四）—— 在使用ElementUI时点击同一个路由，页面报错

    这个不可描述的问题是:在使用ElementUI时点击同一个路由,页面报错. 错误代码如下: element-ui.common.js?ccbf:3339 NavigationDuplicated {_ ...

  3. Vue项目代码改进（二）—— element-UI的消息显示时间修改

    Message 消息提示 Options duration 显示时间, 毫秒.设为 0 则不会自动关闭 - 默认值3000 全局重写 element 的message 消息提示,修改时间,在main. ...

  4. vue项目代码改进（一）login组件

    Login登录组件 1. 新增登录头像(css样式回顾) 1)div.avatar 2)子绝父相定位,left-top- 3)border 4)placeholder 5)box-shadow box ...

  5. Vue项目代码改进（五）—— 将侧边栏菜单改造为动态后，如何按需显示不同图标

    将侧边栏菜单改造为动态后,目前侧边栏每项的小图标都相同 <el-aside class="aside" width="200px"><el-c ...

  6. vue项目代码格式不统一怎么办？一招教你解决

    vue项目代码风格统一 问题背景 方案分析 1.在package.json中增加prettier的依赖以及运行脚本 2.修改.eslintrc.js,去除所有vue-cli自动生成的规范,自定义插件及 ...

  7. VUE项目学习（三）：win10版nginx部署vue项目

    VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...

  8. 服务器上部署前端Vue项目代码

    服务器上部署前端Vue项目代码 本人自己感觉部署前端代码比部署后端难,主要是我在部署的过程中遇到了各种报错

  9. Cookie, LocalStorage 与 SessionStorage异同

    不同 cookie由服务端生成,用于标识用户身份:而两个storage用于浏览器端缓存数据 一般情况下浏览器端不会修改 cookie,但会频繁操作两个storage cookie有path概念,子路径 ...

最新文章

  1. PS切图篇（一）---界面设置
  2. UML：概要设计，用什么画我的类图？
  3. ItemAdding实现数据验证--中文字段，properties.AfterProperties值为null的问题
  4. hibernate的实现原理
  5. 卷积神经网络Convolutional Neural Network (CNN)
  6. 链路分析 K.O “五大经典问题”
  7. JavaScript通过RegExp实现客户端验证
  8. nginx http proxy 反向代理
  9. Fedora 11-Alpha试用手记
  10. Oracle入门（十四F）之PL/SQL定义变量
  11. 可网管交换机的三种管理方式介绍
  12. 服务器 raid 1t硬盘吗,用了4块1T的硬盘，做了raid5，显示有2.7T，但是分区做完系统后，有700多G不能动...
  13. css选择器_css入门必学，基础重难点，css选择器
  14. 同一页面实现多个Tab选项卡功能
  15. linux查看nginx昅 电视,PHP实现查询汉字笔画、笔画排序、笔画统计
  16. Android实现截屏功能(已适配Android11)
  17. 【直线检测】基于LSD实现直线检测含Matlab源码
  18. 没有配置java环境变量,为什么我java环境变量都还没有配置都可以运行java程序了...
  19. again计算机谱子,Again钢琴简谱-数字双手-YUI
  20. linux系统：can't create transaction lock on /var/lib/rpm/.rpm.lock 错误

热门文章

  1. keil中断函数的写法_在 KeilC里,中断子程序与函数有何不同?( )_学小易找答案
  2. python括号的区别_Python中类-带括号与不带括号的区别
  3. matlab 邻近度 离群点_MATLAB自制迷宫游戏，快来试试吧！
  4. mysql 5.0 修改字符集_修改及查看mysql数据库的字符集
  5. jtextpane设置不能选中_在Bridge cc中不能使用camera raw 的编辑功能，解决方法
  6. 计算机视觉牛人（转载）（最早在自动化所论坛上发现的）
  7. 记号一次更换IBM X3650M4主板后RAID无法启动的解决
  8. hive -e和hive -f的区别（转）
  9. 【hdu 6038】Function
  10. Visual C++中error spawning cl.exe解决办法