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

最新推荐文章于 2025-03-26 19:32:15 发布

原创

最新推荐文章于 2025-03-26 19:32:15 发布 · 599 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#session #cookie

本文介绍了Cookie、LocalStorage和SessionStorage的基本概念、优缺点及使用场景。Cookie主要用于保存登录信息，但大小受限且安全性较低。LocalStorage和SessionStorage都是HTML5的本地存储方式，前者永久保存数据，后者在会话结束时失效。当用户未通过退出按钮关闭页面时，直接关闭导致使用LocalStorage保存的token仍能访问主页，因此建议将LocalStorage替换为SessionStorage以确保安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

存在问题：
如果在退出页面时，没有点击“退出”按钮，而是直接关闭页面，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中新增的一