关于local storage 和 session storage以及cookie 区别简析

最新推荐文章于 2025-01-02 20:25:17 发布
转载 最新推荐文章于 2025-01-02 20:25:17 发布 · 191 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/bellagao/p/6264593.html

本文探讨了sessionStorage与localStorage相较于Cookie的优势，包括更大的存储容量、更长的生命周期以及跨页面的数据传递能力。同时指出了Cookie的一些局限性，如4KB大小限制、数量限制以及不支持中文等问题。

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

 session storage 和local storage 都是存储在客户端的浏览器内；

一：关于COOKIE 的缺陷

* Cookie的问题

       * 数据存储都是以明文(未加密)方式进行存储

         * 安全性低

       * 不能存储中文,只能是英文或数字

       * 单个Cookie的大小有限制,最大4KB

       * 浏览器存储一个网站的Cookie,不能超过300个

二：关于session storage与local storage与Cookie的区别

 生命周期：session storage生命周期为当用户关闭浏览器存储结束，反之，local storage 的生命周期由开发人员决定；

数据存储大小：单个Cookie最大4KB,local storage 及session storage 则由浏览器决定，可以在开发中动态获取其最大容量及剩余容量

三：关于local storage

local storage 可以在不用页面中间进行数据传递，但是只能在同一个域内，在不同浏览器之间进行页面传递storage是无法做到的。

 

转载于:https://www.cnblogs.com/bellagao/p/6264593.html

Cookies、Local Storage、Session Storage、WebSQL 和 IndexedDB
悟已往之不谏，知来者之可追
09-07 738
本地存储，在浏览器中包括了 Cookies、Local Storage、Session Storage、WebSQL 和 IndexedDB 这 5 种形式的本地存储，它们之间的区别: Cookies Cookies 是最早的本地存储，是浏览器提供的功能，并且对服务器和 JS 开放，这意味着我们可以通过服务器端和客户端保存 Cookies。不过可以存储的数据总量大小只有 4KB，如果超过了这个限...
localStroage 和sessionStorage的区别
weixin_30346033的博客
12-02 133
1、localStorage没有时间限制，除非手动清除浏览器缓存。 2、sessionStroage 刷新页面不会存储的数据不会被清除，当关闭该页面时，数据会清除。以下为示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...
cookie和session localStorage和sessionStrorage
qq_38180363的博客
02-13 644
cookie是①存储在本地浏览器②&lt;4kb         获取： request.cookies.get(key, '默认值');        设置 ： resp.set_cookie(key, value , max_age=) session是①存储在服务器②存储在服务器端的数据更加安全③会占用服务器的资源 localStorage:(属于永久存储)  解决cookie存储空...
cookie session
yutingbai的学习之路
02-24 182
cookie session http —— 无状态的（两次请求之间服务器无法识别是否同一个人） cookie： 在浏览器（客户端）保存一些数据，每次向服务器发起请求的时候都会带过来 *保存在客户端的东西，是不安全的，大小是有限（4kb） session： 保存数据用，功能上跟cookie没有区别。 *保存在服务端(安全级别跟数据库差不多)，安全，不限制大小。 session原理： 基于co...
cookie，session，locastorage等总结之session篇
konglei1996的博客
09-17 574
上一篇，点击看这 总结了cookie相关的知识点，刷新了我对cookie的认知，这篇，继续总结session的相关知识。 1.session机制 1.1 什么是Session Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏
sessionStorage与localStorage用法详解
Buddha_ITXiong的博客
03-15 595
sessionStorage与localStorage二者都是H5新增的api用于本地存储 sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。 localStorage：生命周期是永久，这意味着除非用户显示在浏览...
一文透彻了解cookie、session及 local storage区别（附上完整代码）
阿土不土的博客
01-02 930
一文透彻了解cookie、session及 local storage区别
Local Storage 和 Session Storage：前端持久化存储的双剑合璧
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-22 1430
在前端开发中，和为开发者提供了强大的数据存储能力，它们各自的特点和适用场景使得它们成为构建现代Web应用的重要组成部分。通过上述示例和技巧，希望能激发你对本地存储的深入思考，以便在实际项目中更高效地利用这些工具。前端世界日新月异，但核心的开发原则和最佳实践始终是构建高质量应用的基石。和只是冰山一角，探索并掌握它们，你将为用户提供更加流畅和个性化的Web体验。欢迎来到我的博客，很高兴能够在这里和您见面！
存储大作战：探索Local Storage与Session Storage的奥秘
热门推荐
todoitbo的博客
05-08 1万+
本文将深入探讨Web开发中常用的本地存储技术，即Local Storage与Session Storage。我们将探讨它们的用途、区别和最佳实践，帮助读者更好地选择和应用合适的存储方案。
速适 (Swoosh) 存储专家 - 专治 Cookie 和 Local Storage-crx插件
04-01
Local Storage 是紫色，Session Storage 是蓝色，Cookie 是黄色，Swoosh 统统概括 亮点功能：- Local Storage, Session Storage 和 Cookie 3合1编辑器，增删改查搜索收藏及批量操作- 实时自动更新，从此告别手动刷新...
Session
Csdn_NeverGU的博客
09-09 259
Session 一个 Web 服务器可以分配一个唯一的 session 会话 ID 作为每个 Web 客户端的 cookie，对于客户端的后续请求可以使用接收到的 cookie 来识别。 HttpSession对象 HttpSession session = request.getSession(); 标志会话JSESSIONID Session 既然是为了标识一次会话，那么此次会话就应该有...
cookie,session,localStorage之间的联系与区别
action_xing的博客
07-21 1226
1、cookie用来存储用户相关数据，存储的位置在用户本地： php: setcookie("key","value","time"); 读取cookie：$_COOKIE 删除cookie：setcookie让时间过期； JS: 设置cookie（js中存放位置document.cookie）： JS中读取出来的cookie是：document.cookie="username=a
掌握cookie 的生存期
Gale_2395的博客
05-28 360
如果想要cookie在浏览器窗口关闭之后还能继续使用，就需要为cookie设置一个生存期。所谓生存期也就是cookie 的终止日期，在这个终止日期到达之前，浏览器随时都可以读取该cookie。一旦终止日期到达之后，该cookie将会从cookie文件中删除。在默认情况下，cookie是临时存在的。在一个浏览器窗口打开时，可以设置cookie，只要该浏览器窗口没有关闭，cookie就一直有效，而一旦浏览器窗口关闭后，cookie也就随之消失。
Cookie的有效时间及其存储方式(纯干货不废话)
m0_63553261的博客
09-24 7181
Cookie的存储方式及其有效时间 浏览器中通常有两种主要的Cookie存储方式对应两种名称(会话Cookie,持久Cookie)： 1. 进程内存中存储的会话Cookie：这些Cookie存储在浏览器的内存中，只在浏览器会话期间有效。一旦关闭浏览器，这些Cookie就会被删除。这些Cookie通常用于临时存储会话信息或其他不需要持久保存的数据。 2. 硬盘中存储的持久Cookie：这些Cookie被保存在计算机的硬盘上，以便在浏览器会话之间保持持久性。这些Cookie具有过期时间，可以在浏览器关闭后
浏览器存储(cookie、localStorage、sessionStorage)
weixin_45696837的博客
03-04 2038
浏览器存储(cookie、localStorage、sessionStorage)
浏览器中Local Storage和Session Storage的区别
yangao1213192588的博客
12-12 1746
Local Storage：数量空间没有限制，只要硬盘空间较大，可以一直存 Session Storage：是一个会话存储对象，在Session Storage中保存的数据只能在同一窗口或者同一标签中有效，关闭窗口后将会删除Seesion Storage中的数据。 Seesion Storage的存储方式采用key/value的方式，可保存5M左右的数据（不同的浏览器会有区别） ...
cookie ，session 和localStorage的区别详解
ljiechang的专栏
09-02 1万+
当你在浏览网站的时候，WEB 服务器会先送一小小资料放在你的计算机上，Cookie 会帮你在网站上所打的文字或是一些选择， 都纪录下来。当下次你再光临同一个网站，WEB 服务器会先看看有没有它上次留下的 Cookie 资料，有的话，就会依据 Cookie 里的内容来判断使用者，送出特定的网页内容给你。 Cookie 的使用很普遍，许多有提供个人化服务的网站，都是利用 Cookie 来辨认使用
关于页面的 回退问题 locastorage和sessionStorage的区别
lishaheshizan的博客
11-16 3117
location.href="a.html“;   是不带参数的跳转； window.history.back();  是带参数的回退；但是在android中这种方法不能用 用initpage来记录跳转前的页面 html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存
local storage和session storage和cookie的区别
最新发布
03-29
<think>好的，用户问的是localStorage、sessionStorage和cookie的区别。我需要先回忆一下这三者的基本概念和各自的特性。首先，他们都是用于浏览器端存储数据的技术，但用途和机制有所不同。 首先，我应该考虑他们的存储位置。cookie是每次HTTP请求都会携带的，存储在客户端，而localStorage和sessionStorage是Web Storage API的一部分，数据仅保存在客户端，不会发送到服务器。这一点很重要，特别是涉及安全性和性能的时候。 接下来是存储容量。我记得cookie的容量比较小，通常是4KB左右，而Web Storage通常可以提供更大的空间，比如5MB或更多。这可能影响用户如何使用这些存储方式，比如存储大量数据时选择Web Storage更合适。 然后是生命周期。cookie可以设置过期时间，如果不设置，就是会话级别的，关闭浏览器就失效。localStorage是持久存储，除非主动删除，否则一直存在。sessionStorage则是会话级别的，关闭标签页或浏览器就会清除。这关系到数据的持久性需求。 作用域方面，cookie在同源窗口间共享，localStorage也是同源共享，而sessionStorage则仅限于同一个标签页。这个区别对于多标签页应用的数据隔离很重要，比如不同标签页的sessionStorage互不影响。 接下来需要考虑到数据访问方式。cookie可以通过document.cookie访问，而Web Storage有专门的API，比如setItem和getItem。这可能涉及到开发的便利性和代码的可维护性。 安全性也是一个关键点。cookie容易被CSRF攻击，而Web Storage不会自动发送到服务器，相对安全一些。不过，XSS攻击仍然可能威胁到Web Storage，所以需要适当的安全措施。 用户的真实需求可能是在开发中选择合适的存储方式，比如需要持久化数据、会话数据或需要与服务器交互的数据。例如，用户身份认证可能使用cookie，而本地缓存大量数据可能用localStorage，临时表单数据则用sessionStorage。 还要考虑用户可能没有直接提到的点，比如HTTP Only的cookie可以防止XSS攻击，而Web Storage的数据需要手动清理，否则可能长期占用用户磁盘空间。此外，现代浏览器对Web Storage的支持很好，但在某些旧版本或特殊环境中可能需要兼容处理。 最后，需要以清晰的结构呈现这些区别，帮助用户快速理解和应用。可能需要用表格或分点说明，结合具体的使用场景，让用户更容易做出选择。</think>以下是localStorage、sessionStorage和cookie的核心区别对比，采用结构化说明： ```plaintext ┌───────────────┬───────────────┬───────────────┬───────────────┐ │ 特性/存储方式 │ Cookie │ localStorage │ sessionStorage │ ├───────────────┼───────────────┼───────────────┼───────────────┤ │ 存储容量 │ 4KB │ 5-10MB │ 5-10MB │ ├───────────────┼───────────────┼───────────────┼───────────────┤ │ 生命周期 │ 可设置过期时间 │ 永久存储 │ 会话级存储 │ │ │（默认会话级） │（需手动删除） │（标签页关闭失效）│ ├───────────────┼───────────────┼───────────────┼───────────────┤ │ 数据传递 │ 每次HTTP请求 │ 仅客户端存储 │ 仅客户端存储 │ │ │ 自动携带 │ │ │ ├───────────────┼───────────────┼───────────────┼───────────────┤ │ 作用域 │ 同源窗口共享 │ 同源窗口共享 │ 仅当前标签页 │ ├───────────────┼───────────────┼───────────────┼───────────────┤ │ 访问方式 │ document.cookie│ API操作 │ API操作 │ │ │ │（key-value） │（key-value） │ ├───────────────┼───────────────┼───────────────┼───────────────┤ │ 安全性 │ 有CSRF风险 │ XSS风险 │ XSS风险 │ │ │ 可设HttpOnly │ 需手动防范 │ 需手动防范 │ └───────────────┴───────────────┴───────────────┴───────────────┘ ``` **数学表达补充说明**： 1. 性能影响对比：设$n$为请求次数，cookie的传输开销为$O(n)$，而Web Storage（local/session）为$O(1)$ 2. 容量限制公式： - Cookie总容量约束：$\sum_{i=1}^k size(cookie_i) \leq 4KB$ - Web Storage单域容量：$size(data) \leq 5MB$（多数浏览器） **典型应用场景**： 1. Cookie：用户身份认证（存储session ID）、跟踪用户行为 ```javascript // 设置带过期时间的cookie document.cookie = `token=${jwt}; expires=${new Date(2025,0,1).toUTCString()}; path=/` ``` 2. localStorage：持久化用户偏好设置 ```javascript // 存储主题配置（典型键值操作） localStorage.setItem('theme', JSON.stringify({ mode: 'dark' })) ``` 3. sessionStorage：临时表单数据存储 ```javascript // 页面刷新时保留未提交数据 window.addEventListener('beforeunload', () => { sessionStorage.setItem('draftForm', formData) }) ``` **特殊场景对比**： - 隐私模式下：sessionStorage行为不变，localStorage在隐私窗口关闭后自动清除 - 跨域场景：三者均遵守同源策略，其中cookie可通过`SameSite`属性控制跨站发送 **工程建议**： 1. 敏感数据避免使用Web Storage（可能受XSS攻击） 2. 高频读写场景优先使用Web Storage（避免cookie的$O(n)$传输开销） 3. 需要服务端访问时只能用cookie（如实现SSR身份验证）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值