描述cookies,sessionStorage和localStorage的区别

本文对比了前端开发中常用的三种存储技术:cookies、sessionStorage 和 localStorage 的特性,包括它们的数据存储大小限制、数据有效期、数据作用域等内容,并解释了同源策略的概念及其在安全性方面的重要性。

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



三者都是在浏览器端存储数据。
1.数据存储大小限制不同。
cookies:数据始终在同源的http请求中携带,即cookie在服务器和浏览器间回传。故存储的数据大小最小,一般为4k。
sessionStorage:数据在本地保存,不会自动把数据发给服务器。所以一般5M或者更大。
localStorage:数据在本地保存,不会自动把数据发给服务器。所以一般5M或者更大。
2.数据有效期不同
cookies:数据在cookie设置的有效期之前都有效,即使窗口和浏览器关闭。
sessionStorage:数据在关闭浏览器窗口后自动清除。存储的数据仅在同源窗口内有效,即使在不同浏览器相同页面也是无效的。一般用于存储会话数据。
localStorage:始终有效,因此用作持久数据。
3.数据作用域不同
cookies:在所有同源窗口敏感词享。
sessionStorage:不在不同浏览器窗口敏感词享。
localStorage:在所有同源窗口敏感词享。

同源:
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
  • 协议相同
  • 域名相同
  • 端口相同
举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下。
  • http://www.example.com/dir2/other.html:同源
  • http://example.com/dir/other.html:不同源(域名不同)
  • http://v2.www.example.com/dir/other.html:不同源(域名不同)
  • http://www.example.com:81/dir/other.html:不同源(端口不同)

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?

很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。

由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

1.3 限制范围

随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。

(1) Cookie、LocalStorage 和 IndexDB 无法读取。

(2) DOM 无法获得。

(3) AJAX 请求不能发送。

虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响,所以有时需要规避上面三种限制。



### CookiesSessionStorage LocalStorage区别 #### 存储机制 Cookies 是一种较早的客户端存储技术,主要用于保存用户的登录状态或其他少量数据。它们通过 HTTP 求头发送到服务器,在每次求时都会被附加到求中[^1]。 `sessionStorage` 提供了一种临时性的存储方式,仅限于当前浏览器窗口或标签页中的会话生命周期内有效。一旦关闭对应的窗口或标签页,其内容就会丢失[^2]。而 `localStorage` 则提供了持久化的键值对存储功能,除非手动清除或者覆盖原有数据项外不会消失。 #### 数据容量与有效期 关于数据量方面,Cookie每条记录大小上限通常不超过4KB;相比之下,Web Storage API下的两种形式都允许更大的空间——大多数现代浏览器支持至少5MB甚至更多用于localStoragesessionStorage同样如此但因属于短期性质所以实际应用上可能更少一些具体取决于实现环境的不同情况. 另外值得注意的是时间维度上的差异: Cookie可以设置过期日期(expiration date),如果未指定则默认当次访问结束之后自动删除;对于其他两者来说并没有内置这样的概念 - 即使存在某些特定条件下(比如用户主动清理缓存)可能导致信息丧失之外正常情况下Localstorage里的资料会长久保留下去直到人为干预为止 whereas Sessionstoragedata will be erased upon termination of browsing session regardless whether there has been any activity during this period or not . #### 安全性隐私保护措施 由于Cookie经常携带敏感的身份验证令牌等重要参数因此围绕着它的安全性设计格外严格包括但不限于HttpOnly标记防止JavaScript脚本读取以及Secure标志确保只在HTTPS连接下传输等等特性来增强防护力度 . 反观剩下的那两个选项虽然也具备一定的隔离机制比如说同源策略(Same-origin Policy)限制跨域操作但是总体而言缺乏专门针对恶意行为定制的安全手段所以在处理涉及个人机密之类的内容时候应该更加谨慎考虑采用更为稳妥的方式如加密后再储存之类的额外步骤加以保障 . ```javascript // Example usage of localStorage and sessionStorage localStorage.setItem('username', 'JohnDoe'); // Persists across sessions sessionStorage.setItem('gameState', JSON.stringify({ level: 10 })); // Only lasts until window/tab closes console.log(localStorage.getItem('username')); // Retrieves stored username from persistent store console.log(sessionStorage.getItem('gameState')); // Gets game state while tab/window remains open ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值