Cookie、localStorage、sessionStorage及Storage

最新推荐文章于 2025-05-16 11:40:52 发布

星霜下逆天生

最新推荐文章于 2025-05-16 11:40:52 发布

阅读量666

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/donglize521521/article/details/107420065

本文深入探讨了前端存储技术，对比分析了Cookie、localStorage和sessionStorage的区别，包括存储大小、有效期、路径限制、数据类型及API特性。同时，介绍了如何封装Storage以满足更复杂的数据存储需求。

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

Cookie、localStorage、sessionStorage及Storage封装

1.前端登录的4种方式
 2.快速上手Token登录认证
3.jwt 实践应用以及特殊案例思考
4.使用LocalStorage、sessionStorage报异常DOMException: Failed to execute ‘setItem’ on ‘Storage’: 解决方法
5.使用LocalStorage、sessionStorage报异常DOMException: Failed to execute ‘setItem’ on ‘Storage’: 解决方法
6.深入浅出前端本地储存
7.在页面刷新时将vuex里的信息保存到sessionStorage里，避免丢失
8.Vue 实现输入框新增搜索历史记录功能

"Cookie、localStorage、sessionStorage 三者区别?"这是一道面试题，看似非常简单，但是你要完全掌握还是需要功夫的，但凡使用过Storage，不管是localStorage还是sessionStorage其实也都有API了，它们已经有getItem(),setItem()，removeItem(),clear(),为什么还要进行封装？本节主要讲cookie和Storage的有什么关联及区别，以及为什么对Storage进行封装？

1.Cookie、localStorage、 sessionStorage 三者区别?

（1）localStorage和sessionStorage关系

localStorage和sessionStorage都是一种缓存技术，区别是localStorage本地永久存储，存储到浏览器端有明确的文件可以读写，sessionStorage在内存中存储，随着浏览器的关闭会而自动关闭。

(2)cookie和storage的关联（多角度和多维度去回答）

①存储大小: Cookie4K、Storage5M

过去我们存储cookie通常都是4k，其实说实话，4k不小了，作为字符串很多了，但是它满足不了我们现有的需求了，我们现在前端经常把后端批量性的报文存储到浏览器里面去了，这种需求用cookie存的话就很麻烦，因为cookie我们经常需要设置它的域名，它的过期时间，设置它的路径，然后把cookie的值存进去，通常我们只存一个值。但是现在我们很多需求是把整个一段的JSON报文存下去，这种方式用cookie就不太合适了，另外一点我们前端会把cookie发送到服务器端，所以针对于大段的报文用storage存储比较好,cookie是4k，Storage是5M，可以存很多很多报文都没有关系。

②有效期: Cookie拥有有效期，Storage永久存储

Cookie设置了过期时间，设置很多都是7天，1个月过期，过期之后需要重新登录，过期之后会消失，自动被delete干掉了，localStorage是永久存储，sessionStorage是会话存储，当浏览器关闭就没了，是在内存里面存的。

③Cookie会发送到服务器端，存储在内存中，Storage只存储在浏览器端

Cookie会发送到服务器端，为什么说浏览器和服务端会认识你，比如说张三登录到系统里来，我们要获取用户信息，为什么会把