cookies、sessionStorage和localStorage 三者的区别

最新推荐文章于 2024-06-15 12:33:15 发布
最新推荐文章于 2024-06-15 12:33:15 发布
阅读量546 收藏 1
点赞数
分类专栏： cookies、sessionStorage和localSt 文章标签： web储存区别 本地储存
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32519421/article/details/79400599
版权

cookies ： 数据存放在客户的浏览器上，不是很安全，单个cookie保存的数据不能超过4K

sessionStorage：用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。它也是采用Key - Value的方式存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给服务器，避免带宽浪费

sessionStorage与localStorage容量大约为4M；

Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

深入理解Web存储机制：Cookie、SessionStorage与LocalStorage的区别
chaosweet的博客
01-13 1171
选择正确的工具是成功的开始。
一篇文章搞懂Cookie, sessionStorage 和 localStorage
AQiukai的博客
08-08 1352
本文章是本人在实习过程中遇到的知识点的自我整理和汇总，主要用于自己记录和回顾，如果可以帮到别人也是十分乐意的。这次详细解释了cookie、localStorage、sessionStorage的详细说明和这三者的区别
cookies sessionStorage 和localStorage的区别：
mumu1998的博客
09-26 346
首先它们都是浏览器端存储的数据。  sessionStorage 和localStorage是HTML5 WEB Storage API提供的，可以方便的在web请求之间保存数据，有了本地数据，就可以避免数据在浏览器和服务器之间不必要的来回传递。 sessionStorage只有浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在。但是关闭窗口后，sessionStorage就被...
【cookie、sessionStorage、localStorage的区别】，【cookie、session、token】
bidepanm的博客
04-27 1060
存储内容大小一般支持5M左右（不同浏览器可能还不一样） 浏览器端通过window.sessionStorage和window.localStorage属性来实现本地存储机制 相关API： （1）xxxStorage.setItem(‘key’, ‘value’); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 （2）xxxStorage.getItem(‘key’); 该方法接受一个键名作为参数，返回键名对应的值。 （3）xxxStorage.removeItem.
cookies、sessionStorage和localStorage解释及区别
qq_36956015的博客
11-21 326
cookies、sessionStorage和localStorage解释及区别
Cookie、sessionStorage 和 localStorage 区别
m0_64544033的博客
03-21 263
Cookie、sessionStorage 和 localStorage 区别
cookie，sessionStorage和localStorage的区别
wunianisme的博客
03-11 1万+
相同点 都存储在客户端。 不同点 1.存储大小 cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。 2.有效时间 localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。 sessionStorage：数据在当前浏览器窗口关闭后自动删除。 cookie：设置的coo...
Localstorage、sessionStorage、cookie 的区别
Wujunbin952的博客
07-03 4530
Localstorage、sessionStorage、cookie 的区别和H5的浏览器储存。
【web前端】cookie、sessionStorage、localStorage 区别、过期清空、登录验证token
sinat_39394862的博客
04-19 1214
cookie、sessionStorage、localStorage 区别？ 如何实现可过期的localstorage数据？（如何清理过期的缓存） 登录验证实现(token)
localStorage、sessionStorage、cookie
qq_42550235的博客
04-28 2860
前端浏览器本地存储的方式有三种，分别是cookie的生命周期是永久的，存放数据大小一般为5MB，不参加和服务的通信，不能跨浏览器使用。应用场景：历史记录、登录仅在当前会话下有效，关闭页面或者浏览器后被消除。存放数据大小一般为5MB, 不能参与于服务器的通信，不能跨浏览器使用。页面之间的传值，敏感账号的一次性登录。cookiecookies数据存储在浏览器，单个cookie数据不能超过4k;cookie 的信息会在 http 请求的时候携带到服务器，可在。
什么是sessionStorage和localStorage
weixin_41569735的博客
05-01 199
https://www.cnblogs.com/pengc/p/8714475.html
cookie、sessionStorage和localStorage的详解与区别
LS_952754的博客
07-26 1200
cookie、sessionStorage和localStorage的详解与区别
前端面试题：cookies，sessionStorage 和 localStorage 的区别？
qq_32085647的博客
09-17 2075
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage 、localStorage 和 cookie 之间的区别 共同点：都是保存在浏览器端，且同源的。 区别： cook
Cookie、Session、LocalStorage 和 SessionStorage 的区别详解
m0_65084430的博客
06-15 6679
在前端开发中，数据存储和状态管理是非常重要的内容。常用的存储方式有 Cookie、Session、LocalStorage 和 SessionStorage。本文将详细介绍这四者的区别，帮助开发者更好地理解和选择合适的存储方案。Cookie 是由服务器生成并发送到客户端的一小段数据，客户端会将其存储并在后续请求中携带，帮助服务器识别用户。用户身份认证（如记住登录状态）存储用户偏好设置跟踪用户行为（如广告点击记录）// 设置 Cookiepath=/";// 读取 Cookie。
cookie、localStorage和sessionStorage三者的区别
04-28 2099
cookie、localStorage和sessionStorage三者的区别
一文读懂cookie、sessionStorage和localStorage的区别
热门推荐
陈坚泓的博客
11-15 1万+
一文读懂cookie、sessionStorage和localStorage的区别, 读完后,面试相关的问题就基本没问题了 由于`HTTP是一种无状态的协议`，服务器单从网络连接上是无法知道客户身份的。这时候`服务器`就需要给`客户端`颁发一个`cookie`，用来确认用户的身份。
sessionStorage 、localStorage 和 cookie 之间的区别
qq_32907491的博客
09-17 303
都是保存在浏览器端，且同源的。
localStorage，sessionStorage和cookie的区别及使用
Mr_Wanter
10-01 1280
1、概述 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。 sessionStorage、localStorage、cookie都是在浏览器端存储的数据。 2、共同点 都是保存在浏览器端，且同源的。 3、区别 传递方式： cookie在浏览器和服务器间来回传递； sessionSto...
localStorage、sessionStorage、cookie 三者明细区别？
最新发布
02-25
### 存储机制的区别 浏览器提供了多种方式来存储数据，`localStorage`、`sessionStorage` 和 `cookie` 是其中三种常用的方式。每种方式都有其特定的应用场景和特点。 #### 数据持久性 对于 `localStorage` 来说，一旦保存的数据除非被主动删除或通过编程手段清除，否则这些数据会一直存在用户的设备上[^1]。而 `sessionStorage` 的生命周期仅限于当前页面会话期间，在关闭窗口或标签页之后就会自动清空所存入的信息[^2]。至于 `cookie` ，它可以在设定的时间内保持有效；如果未指定过期时间，则默认会在浏览器关闭时失效[^3]。 #### 容量大小 就容量而言，`localStorage` 可以容纳大约 5MB 左右的空间用于储存键值对形式的数据（具体取决于不同浏览器），这使得它可以用来处理相对较大的数据集[^4]。相比之下，`sessionStorage` 同样拥有约莫相同级别的空间限制，即大概也是 5MB 上下浮动[^5]。然而，`cookie` 提供给开发者的可用字节数非常有限——通常不超过 4KB，并且每次 HTTP 请求都会携带所有相关联的 cookies，因此不适合大量数据传输[^6]。 #### 使用目的与安全性考量 当涉及到安全性和隐私保护方面时，三者也有所差异。由于 `cookie` 经常伴随着跨站请求伪造攻击(CSRF)，所以一般建议只在必要情况下才使用它们传递敏感信息并采取适当措施防止恶意利用[^7]。另一方面，虽然 `localStorage` 和 `sessionStorage` 不会被发送到服务器端作为HTTP头部的一部分，但是仍然可能面临XSS漏洞的风险，所以在设计应用逻辑的时候需要注意这一点[^8]。 ```javascript // 设置 localStorage, sessionStorage 和 cookie 示例 localStorage.setItem('key', 'value'); // 长期保存 sessionStorage.setItem('key', 'value'); // 页面会话期内有效 document.cookie = "username=John Doe"; // 发送到服务器随同每一个请求一起 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值