浏览器的存储

最新推荐文章于 2025-10-15 19:56:26 发布
原创 最新推荐文章于 2025-10-15 19:56:26 发布 · 378 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

浏览器的本地存储主要分为cookies，web storage，indexedDB

cookies，web storage都遵守同源策略

1，cookies

一般Cookie的作用就是用来做状态存储的

大小一般不超过4kb，其始终会在同源的http请求中自动携带，在设置有效期时间之前一直有效，

2，web storage

大小可以达到5mb，只能存储字符串类型的数据

  localstorage，除非主动删除，否则一直存在

  sessionstorage，页面关闭，数据就被删除（仅在当前会话下有效）

3，indexedDB

存储空间相对来说大很多，遵守同源策略，

键值对存储，异步（不会直接返回数据，而是一个callback），支持二进制存储

   

一文了解浏览器存储+sessionStorage+cookie+localStorage
m0_51244077的博客
10-30 2080
一文了解浏览器存储+sessionStorage+cookie+localStorage
浏览器原理---浏览器本地存储
sinat_34896766的博客
04-30 1722
Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求。b、Cookie无法跨域。
浏览器存储及使用
博客
09-01 1476
声明：本文为优快云原创投稿文章，未经许可，禁止任何形式的转载。 作者：叶文兵，MaxLeap UX组开发人员，负责公司主要项目前端开发工作，逐渐往Node.js全栈方向发展。本科毕业于安徽师范大学，入坑前端开发近3年。 责编：钱曙光，关注架构和算法领域，寻求报道或者投稿请发邮件qianshg@youkuaiyun.com，另有「优快云 高级架构师群」，内有诸多知名互联网公司的大牛架构师，...
​浏览器存储
id9426的博客
09-04 853
功能推荐技术存储用户偏好 / 主题 / 设置​​临时表单数据 / 页面级状态​​​IndexedDB​（推荐使用 Dexie.js）身份验证 / Token / 小数据跨请求​Cookies​（推荐 js-cookie 库）离线缓存 / 资源缓存 / PWA​Cache API​ + ​​。
浏览器存储全解析：从 Cookie 到 IndexedDB，一文搞懂最佳实践！
最新发布
Caleb的博客
10-15 599
在现代Web开发中，“数据存储”几乎无处不在。无论是用户登录状态、页面主题设置、购物车缓存，还是离线数据同步，都离不开**浏览器存储（Web Storage）**机制的支持。然而，大多数开发者对它的理解还停留在的层面。实际上，浏览器存储体系早已演化出多种机制，每种都有不同的性能、容量、作用域和应用场景。这篇文章带你系统了解浏览器存储的五大方式，并附上性能对比与优化实战技巧。浏览器存储早已不是“localStorage 一把梭”的时代。
浏览器存储
代码搬运工
08-01 421
Cookie、session、localStorage、sessionStorage 1、三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被...
Cookie 已凉，Web 存储该这么做！
优快云资讯
04-02 2454
作者 | 浪里行舟 责编| 郭芮 随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。 WebApp 优异的性能表现，有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需，逐渐被WebStorage、IndexedDB所...
vue2-storage:通过浏览器存储包装JavaScript或Vue.js应用
05-02
Vue2-Storage是一款针对Vue.js应用的浏览器存储插件，旨在简化JavaScript或Vue.js应用程序对浏览器本地存储（localStorage）和会话存储（sessionStorage）的使用。它通过提供一个易于理解和使用的API，使得数据存储...
常见的浏览器存储方式（cookie、localStorage、sessionStorage）
11-27
在前端开发中，浏览器存储是不可或缺的一部分，它主要用于在用户与网页交互时持久化数据。本文将详细介绍三种常见的浏览器存储方式：Cookie、localStorage 和 sessionStorage。 首先，Cookie 是最早的浏览器存储...
鲶鱼浏览器存储 jLos v1.0.0
10-11
【鲶鱼浏览器存储 jLos v1.0.0】是一个专为Catfish（鲶鱼）CMS设计的本地存储解决方案。它旨在提供一个高效且易于使用的机制，以便在用户浏览器中存储数据，并确保这些数据在浏览器关闭后仍能保持持久性。这个技术的...
浏览器相关
Superman_Qsir的博客
04-22 171
浏览器存储 浏览器给前端开发人提供了存储数据。 作用：实现数据持久化存储。可以实现数据的共享 url传参 location.href 跳转链接并拼接下一个页面需要的参数 在两一个页面中location.href获取页面信息，并对?后面参数进行格式化处理 最后使用格式化后的参数。 数据持久化存储locaStorage 为什么需要locaStorage 只要浏览器中数据需要持久化存储都可以使用localStorage 1：大小5M 2: 需要使用ap才能删除数据 removeItem clear
浏览器存储webStorage
qq_51403084的博客
12-13 405
1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制 3.相关API： 1.localStorage.setItem('key','value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 2.localStorage.getItem('person'); 该方法接受一个键名作为参数.
浏览器存储（cookie，localStorage，sessionStorage）
weixin_44921693的博客
09-19 1268
关于浏览器存储的一些思考，三个常见存储的区别
浏览器本地存储
ganle的博客
03-07 1894
总结：浏览器本地存储分为 —— cookie Web Storage （localStorage、sessionStorage） indexedDB 【tips】WebSQL属于关系型数据库，目前未列入html标准中，只有chrome、Safari等部分webkit浏览器支持，其他浏览器均不支持，IE11仅部分支持IndexedDB数据库。 （1）cookie ## 会话（Session）跟踪： 会话，指用户登录网站后的一系列动作，比如浏览商品添加到购物车并购买。会话跟踪是Web程序中常用的技术
浏览器存储可以储存多少k
04-03
<think>好的，用户想知道浏览器存储能存多少K。首先，我需要明确“浏览器存储”具体指的是什么，因为浏览器有多种存储方式，比如Cookie、Web Storage（localStorage和sessionStorage）、IndexedDB、Web SQL（已废弃）、Cache API等。不同的存储方式有不同的容量限制，用户可能没有明确指哪一种，所以需要分别介绍。 接下来，我需要回忆各种存储方式的容量限制。首先是Cookie，通常每个域名下最多允许50个左右，每个Cookie大小约4KB，总容量大概200KB左右。然后是Web Storage，也就是localStorage和sessionStorage，大多数现代浏览器允许每个域名5MB左右，但有些可能到10MB。IndexedDB的容量更大，通常每个域名可以到50MB以上，甚至根据浏览器和用户设置可能更多。Cache API属于Service Worker的一部分，通常和IndexedDB类似，但可能受浏览器整体存储限制的影响，比如Chrome允许每个源最多使用80%的磁盘空间，具体可能到几百MB甚至GB级别。 用户的问题提到“多少K”，可能更关注较小的存储方式，比如Cookie或Web Storage，但需要确认是否包括所有类型。另外，需要注意不同的浏览器可能会有不同的实现，比如Safari和Chrome在localStorage的限制上可能不同，移动端和桌面端也可能有差异。此外，用户可能还关心超出限制时的处理，比如浏览器会抛出错误，需要捕获异常。 需要组织回答的结构，先分点列出每种存储方式的容量，再比较它们的区别和适用场景。同时提醒用户实际使用时要考虑不同浏览器的兼容性和限制，以及存储数据时的错误处理。可能还需要提到用户权限，例如IndexedDB在需要更多空间时可能会提示用户授权。 另外，需要确认是否有最新的数据，因为浏览器版本更新可能会调整存储限制。例如，某些浏览器可能提高了IndexedDB的默认配额，或者引入了动态调整的策略。最后，总结建议根据具体需求选择合适的存储方式，并注意处理存储超限的情况。</think>浏览器存储容量因不同存储方式而异，以下是常见存储类型及其容量限制的详细说明： --- ### 1. **Cookie** - **容量**：单个域名下所有Cookie总大小约 **4KB（4096字节）** - **特点**： - 每个Cookie最大4KB，每个域名最多允许约50个Cookie（不同浏览器有差异） - 每次HTTP请求都会携带Cookie数据，影响性能 - **适用场景**：小规模会话管理（如用户登录态） --- ### 2. **Web Storage（localStorage/sessionStorage）** - **容量**：**5~10MB/域名**（不同浏览器不同） - Chrome/Firefox：约5MB - Safari：约5MB（移动端可能更小） - 超出容量会触发`QuotaExceededError`错误 - **特点**： - 数据永久存储（localStorage）或会话级存储（sessionStorage） - 仅存储字符串，需手动序列化对象（如`JSON.stringify`） - **适用场景**：中小规模持久化数据（如用户偏好设置） --- ### 3. **IndexedDB** - **容量**：**动态分配**，通常初始为 **50MB/域名**，可申请扩容 - 浏览器可能提示用户授权扩容（如Chrome允许单个源使用最多80%的磁盘空间） - 实际上限可达数百MB甚至GB（取决于用户设备） - **特点**： - 支持结构化数据、事务操作、索引查询 - 异步API，适合存储大量数据 - **适用场景**：离线应用、大型结构化数据（如本地数据库） --- ### 4. **Cache API（Service Worker缓存）** - **容量**：与IndexedDB类似，通常**50MB~数百MB/域名** - 浏览器自动管理，可能清除不常用缓存 - 可通过`navigator.storage.estimate()`查询剩余空间 - **适用场景**：离线资源缓存（PWA应用的核心技术） --- ### 5. **Web SQL（已废弃）** - **容量**：早期约**5~50MB/域名**（现代浏览器已弃用，不推荐使用） --- ### **总结与建议** 1. **小数据（KB级）**：优先使用Cookie或Web Storage 2. **中大数据（MB级）**：选择IndexedDB或Cache API 3. **容量查询**：通过代码动态检测剩余空间： ```javascript navigator.storage.estimate().then(estimate => { console.log(`已用：${estimate.usage}字节，剩余：${estimate.quota}字节`); }); ``` --- ### **注意事项** - **浏览器差异**：不同浏览器/设备可能有不同限制（建议测试目标环境） - **清理策略**：浏览器可能自动清理长期未访问的数据 - **异常处理**：写入数据时需捕获`QuotaExceededError`错误 实际开发中应根据数据大小、访问频率和持久性需求选择合适方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大鸡腿最好吃

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值