localStorage、sessionStorage、cookies 有什么区别？

最新推荐文章于 2025-05-16 11:40:52 发布
原创 最新推荐文章于 2025-05-16 11:40:52 发布 · 270 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #存储

文章详细对比了cookie、sessionStorage和localStorage在有效期、存储容量、作用域及与服务端交互的区别。cookie默认在浏览器关闭后失效，而sessionStorage和localStorage在特定条件下可长期保存。它们的存储大小也不同，cookie约为4KB，而sessionStorage和localStorage可达5MB。此外，sessionStorage局限于当前会话页，cookie和localStorage则在同源窗口间共享。cookie会参与HTTP请求，而sessionStorage和localStorage仅用于前端本地存储，不与服务端通信。

1、存储的时间有效期不同
cookie的有效期是可以设置的，默认情况下是关闭浏览器后失效
sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者关闭浏览器就会失效
localStorage的有效期是在不进行手动删除的情况下一直有效
2、存储的大小不同
cookie的存储是4K左右，存储量较小，因为每次http请求都会携带cookie
localStorage和sessionStorage的存储量是5Mb
3、作用域不同
sessionStorage不能在不同的浏览器中共享，即使是同一页面，cookie和localStorage在所有的同源窗口中都是共享的
4、与服务端的通信
cookie是会参与到与服务端的通讯中，一般会携带在http请求的头部中，例如一些关键密钥严重等，有路径的概念，可以限制cookie只属于某个路径下。
localStorage和sessionStorage是单纯的前端存储只在本地保存，不参与服务端的通信

Ideaing~
关注
前端本地存储cookie、localstorage和sessionStorage之间的区别？
nick_zhang的博客
06-06 2439
cookie的使用 cookie可以设置key，value，domain，expires var name = 'one_name'; var value = '123'; var exp = new Date(); exp.setTime(exp.getTime() + 60 * 2000);//过期时间 2分钟 document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString(); ...
cookies、sessionStorage和localStorage的区别及概念详解
CRMEB小程序商城的博客
05-15 4628
如图，在谷歌浏览器中查看，左侧会看到Local Storage和Session Storage以及Cookies! 一、什么是Cookie？ 先来看看权威的解释，百度百科！ 这里可以看到提到了一个session的概念，其实，cookie和session都是用来跟踪浏览器用户身份的会话方式，但在使用过程中存在很大区别！ Cookie和Session的区别 1.数据存储位置有区别 cookie保存在浏览器端，session保存在服务器端！ 2.使用方式有区别 cookie机制 如果不在浏览器中设置过期时.
cookie、sessionStorage和localStorage的区别
热门推荐
浮生离梦的博客
05-30 8万+
一、 概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）ses...
localStorage、sessionStorage 和 cookies 的区别
weixin_43120290的博客
06-14 137
cookie: 顾名思义小甜饼啊。基本都是在服务端设置，有过期的时间。并且他很小，一般都是限制在 4kb 左右。主要的用途一般是保存用户的登录信息。举个应用例子： 每个 http 请求都会带着 Cookie 信息，所以一般的 cookie 就是能小则小。而一般主要是拿 cookie 来验证用户是否登录。LocalStorage：这个是客户端的本地存储，除非被清除，否则永远保存。一般存储的大小为 5M举个应用例子： 将没有保存过的表单缓存起来用来提高用户体验；还有购物车；以及现在 html5 游戏中通常会产生
sessionStorage,localStorage和cookie三者有什么区别?
mxjwxhn的博客
10-22 565
共同点 它们三者都是浏览器端的存储介质，可以存储一些数据 不同点 sessionStorage是将数据存储在页面的内存中,所以数据会跟随页面的关闭而销毁,存储数据相对较少(5M左右),只能存储字符串; localStorage是将数据存储在电脑的磁盘上,存储数据量大**(20M左右)**,需要手动删除,只能存储字符串; cookie是http协议的重要组成部分,存储数据量相对比较少**(4K左右)，存储cookie的时候可以设置过期时间**，到达过期时间后，会自动销毁，如果没有设置，则跟随浏览器的关闭
localstorage/sessionStorage/cookie 之间的区别
lizhichengwei的博客
12-22 166
大家可以看图记忆哦，会更加清楚简洁！
cookies、localStorage 、sessionStorage 的区别
weixin_47227886的博客
04-10 5533
介绍：cookie，意思是小甜饼，顾名思义，cookie 确实非常小，它的大小限制为 4KB 左右；每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精 简就精简！常用的应用场景：判断用户是否登录。介绍：localStorage，它是 HTML5 标准中新加入的技术，localStorage 已经被大多数浏览器所支持； sessionStorage，它与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同，它只是
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
10-18
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
深入理解Web存储机制：Cookie、SessionStorage与LocalStorage的区别
chaosweet的博客
01-13 1305
选择正确的工具是成功的开始。
12 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
10-14
cookies、sessionStorage 和 localStorage 都是用于在浏览器端存储数据的方式，它们之间的区别如下： 1. cookies：是由服务器发送到浏览器的小型文本文件，存储在用户的计算机上。它们用于跟踪用户的会话状态，记录...
cookies和localStorage和sessionStorage的区别
codezha的博客
09-08 5277
1.cookies和localStorage和sessionStorage的区别首先总的来说，三者都是用于持久化数据存储的手段，都是存储在浏览器端，且同源（协议，端口号，都域名相同） localStorage和sessionStorage都是Web存储，大小5M左右，完全存储在客户端，它们是因为本地存储数据而存在 cookies也是存储在浏览器端的，大小不超过4k，作为http规范的一部分，它是通过
cookies，sessionStorage和localStorage的区别
m0_59070120的博客
04-17 152
1，cookies是网站为了标识用户身份而存储在用户终端 的上的数据 2，cookies数据始终在同源http请求中携带，会在浏览器和服务器之间来回传递，而storage不会 自动把数据发送给服务器，仅在本地保存 3，cookies数据大小不能超过4k，storage比它大很多 4，localStorage存储持久数据，浏览器关闭也不会删除除非自己主动删除 5，sessionStorage数据在当前浏览器关闭后自动删除 6，cookies则是在其设置的过期时间前有效，即使浏览器窗口关闭 ..
Cookie、Session、LocalStorage 和 SessionStorage 的区别详解
m0_65084430的博客
06-15 7917
在前端开发中，数据存储和状态管理是非常重要的内容。常用的存储方式有 Cookie、Session、LocalStorage 和 SessionStorage。本文将详细介绍这四者的区别，帮助开发者更好地理解和选择合适的存储方案。Cookie 是由服务器生成并发送到客户端的一小段数据，客户端会将其存储并在后续请求中携带，帮助服务器识别用户。用户身份认证（如记住登录状态）存储用户偏好设置跟踪用户行为（如广告点击记录）// 设置 Cookiepath=/";// 读取 Cookie。
Localstorage、sessionStorage、cookie 的区别
Wujunbin952的博客
07-03 4588
Localstorage、sessionStorage、cookie 的区别和H5的浏览器储存。
cookie，sessionstorage，localstorage区别
m0_59070120的博客
06-25 105
1，数据有效期cookies则是在其设置的过期时间前有效localstorage里面的数据除非主动删除否则一直有效sessionstorage在浏览器或页面关闭时数据就会销毁2，存储的大小cookie的大小限制为4KBstorage比cookies大得多，一般有5M3，访问限制cookies和localstorage在浏览器的所有窗口内都可以访问到sessionstorage只能在同源的同窗口访问到4，与服务器通信Cookie，每次都会携带在HTTP头中，而storage不会自动发送给服务器...
【localstorage、sessionStorage和cookie】
最新发布
Go_going_的博客
05-16 1541
在实际前端开发中，数据存储是非常重要的。无论是保存用户登录状态、缓存接口数据，还是实现个性化设置，我们都需要选择合适的存储方案。常见的浏览器端存储方式包括和Cookie，它们各有优缺点，适用于不同的场景。本文将结合实际开发，简单介绍这三种存储方式存储方式何时使用？何时避免？Cookie需要服务端交互（如 JWT 认证）存储大量数据（4KB 限制）长期缓存（如用户设置）敏感数据（易被 XSS 攻击）临时数据（如表单草稿）需要跨标签页共享的数据最终推荐。
localStorage和sessionStorage和cookie、session
优快云_of_wmy的博客
07-04 254
一、web Storage与cookie的优缺点以及作用 web Storage包括localStorage和sessionStorage两种，这是HTML5中提出的 作用：（1）提供一种在cookie之外存储会话数据的路径 （2）提供一种大存储量且可以跨会话存在的数据机制 两者区别：本地缓存会缓存到硬盘中，最多存储20M，浏览器缓存则在内存中，会随着浏览器的关闭而消...
前端数据存储全解析：localStorage、sessionStorage 与 Cookie
m0_74037439的博客
03-26 7478
Cookie 是服务器发送到用户浏览器并保存的小段文本，它会在浏览器下次向同一服务器发起请求时被携带并发送到服务器上。会话状态管理：如用户登录状态、购物车内容、游戏分数等需要记录的信息个性化设置：如用户自定义设置、主题等浏览器行为跟踪：如跟踪分析用户行为、广告投放等对于更复杂的数据存储需求，Web Storage API 和 Cookie 可能不足以满足。IndexedDB 提供了一个完整的客户端数据库解决方案：支持存储大量结构化数据支持索引和事务支持复杂查询和游标支持二进制数据（如文件、图像）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值