cookie、localStroage与sessionStorage的区别以及用法_sessionstorage 每次请求会带上-优快云博客

本文详细介绍了cookie、localStorage和sessionStorage的特点和应用场景。cookie用于存储小量信息，保存在浏览器端，安全性较低且大小有限制。localStorage和sessionStorage都是HTML5提供的本地存储方式，前者持久化存储，后者只在会话期间有效，两者存储空间为5MB，且用户无法通过禁用它们来阻止存储。它们主要存储字符串，适用于长期登录、敏感一次性登录等场景，提供更高的存储空间和节省网络流量的优点。

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

cookie是服务器发给客户端的特殊信息, 以文本形式存储在客户端,每次请求都会带上cookie

保存在浏览器端

保存时间

设置过期时间,浏览器关闭后不会清除,保存在硬盘中, 过期时间到期后失效
不设置过期时间, 保存在内存中, 浏览器关闭后消失

单个cookie大小不能超过4kb

安全性较低, cookie截获, cookie欺骗

应用场景

判断用户是否登陆过网站, 以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
保持上次登录的时间等信息
保存上次登录查看的页面
浏览计数

缺点

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

webStorage

localStorage(本地储存)

永久储存, 除非主动删除, 否则不会消失

sessionStorage(会话储存)

仅在当前会话下有效
在同源窗口始终存在, 浏览器关闭之前
浏览器打开新的同源页面
页面刷新都还存在
打开一个新的浏览器窗口同一个页面, 同源的session也是不一样的

两者的存储大小都是5MB

都保存在客户端不与服务器端进行交互

只能储存字符串类型

对于复杂的json格式可以进行stringify和parse来处理

获取方式

window. localStroage
window. sessionStorage

应用场景

localStroage: 长期登录+判断用户是否登录, 长期存储在本地的数据
sessionStorage: 敏感的一次性登录

优点

储存空间大
节省网络流量
可在本地直接获取
不需要与服务器进行交互
获取速度块
安全性较高
API
1. window. localStroage
2. window. sessionStorage
3. setItem(key, value): 保存某个数据
4. getItem(key): 获取某个数据
5. removeItem(key): 删除某条数据
6. clear(): 清除所有数据
7. key(index): 根据索引获取第几条数据的键名