浏览器缓存IndexedDB、localStorage、sessionStorage比较

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

IndexedDB是一种在浏览器中存储大量结构化数据的前端数据库技术，与localStorage和sessionStorage相比，它提供了更大的存储空间，支持多种数据类型，并能通过索引实现高效的数据检索。适用于离线应用，如Todolist等。
  • IndexedDB就是前端数据库，在浏览器中采用key-value键值方式存储数据。
  • 我们经常用的缓存APIlocalStorage和sessionStorage，能满足我们开发时的绝大多数需求，简单的键值存储，但是它们有它们的限制：
* 存储空间限制，只有5M
* 只能存储字符串
* 存储的字段一多就很难管理，存储的字段也无法产生关联
  • IndexedDB的存储空间原则上没有限制，它本质上还是一个数据库，可以存储大量结构化数据（包括文件/blobs）,同时IndexedDB API通过索引的方式实现了数据的高性能搜索。使用比localStorage、sessionStorage复杂得多。
  • 应用场景，不需要网络连接的纯离线应用，比如Todolist这类的用来记录待办任务类型的应用。

资料：

前端缓存策略对比：LocalStorage vs SessionStorage vs IndexedDB
AI架构全栈开发实战笔记
04-27 1036
随着单页应用（SPA）和渐进式Web应用（PWA）的普及，前端应用对客户端数据存储的需求日益复杂。浏览器提供了多种存储机制，其中和IndexedDB是最常用的三种方案。本文旨在通过技术原理对比、API细节解析和实战案例演示，帮助开发者理解三种存储策略的核心差异，掌握在不同场景下的选型原则。背景介绍：明确技术背景、目标读者和文档结构核心概念与对比：解析三种存储机制的技术原理，通过表格和示意图对比关键特性API深度解析：详细讲解数据操作方法，包含完整代码示例高级特性与限制。
前端存储方案：对比localStorage、sessionStorage与BOM
AI架构全栈开发实战笔记
04-29 877
随着单页应用（SPA）和渐进式Web应用（PWA）的普及，前端存储成为构建复杂应用的核心技术。三种存储的本质区别是什么？何时该选择持久化存储 vs 会话级存储？如何避免Cookie带来的性能损耗？存储容量限制如何影响架构设计？基础概念解析：定义三种存储的核心特性技术参数对比：生命周期、容量、作用域等关键指标底层原理剖析：浏览器如何实现数据存储与传输实战开发指南：完整代码示例与最佳实践性能与安全：网络开销、XSS/XSRF风险分析。
[转载]HTML5 Storage Wars - localStorage vs. IndexedDB vs. Web SQL
Arterta的专栏
08-26 3414
Currently, there are three competing approaches for saving serious amounts of data (i.e., persistently, and bigger than cookies) locally in your browser: Web StorageIndexed Database APIWeb SQL
LowDB——轻量级本地JSON数据库
热门推荐
qq_15987295的博客
03-14 5万+
作为轻量级的本地存储方式，对于构建不依赖服务器的小型项目，用LowDB存储和管理数据是十分理想的选择。在Nodejs, Electron and browser等一些小型项目中经常能看到LowDB的身影。https://github.com/typicode/lowdb1. 使用方式npm install lowdb 或者： yarn add lowdbconst low = require('l...
前端存储除了 localStorage 还有啥
semlinker的博客
06-22 704
本文介绍一些与前端数据存储有关，有趣、好玩、有用的开源库。除此之外，还会让你掌握各种 Web 存储方案的特点，赶紧来了解一下。 在介绍目前比较流行的一些开源的前端存储方案之前，阿宝哥先分享一些与存储有关，有趣好玩的开源库。 一、有趣好玩的开源库 1.1 Sharedb Realtime database backend based on Operational Transformation (OT)。 https://github.com/share/sharedb ShareDB 是一个基于 JS.
浏览器缓存 cookie 、localstorage、SessionStorage、IndexedDB对比
StarFishing
12-01 1810
Cookie 1、因为HTTP请求无状态，所以需要cookie去维持客户端状态 2、过期时间 expire 3、cookie的生成方式 ​ （一） http response header中的set-cookie ​ （二） js中可以通过document.cookie可以读写cookie 4、仅仅作为浏览器存储（大小4KB左右，能力被localstorage替代） 5、cooki...
一张图了解浏览器存储 Cookies vs Web Storage vs IndexedDB
郎涯技术
01-16 549
【代码】一张图了解浏览器存储 Cookies vs Web Storage vs IndexedDB。
indexedDB,localStorage,sessionStorage,cookies中哪些和浏览器缓存相关？
07-01
用户的问题是关于“浏览器存储机制与缓存的关系”，具体是比较indexedDB、localStorage、sessionStorage、cookies与浏览器缓存。浏览器缓存通常指的是HTTP缓存，用于存储资源如HTML、CSS、JS文件，以提高页面加载...
【面试题——客户端存储 ＜一＞】localStorage、sessionStorage、cookie 与 indexedDB 的区别
最新发布
前端圈边缘选手，擅长把 UI 稿 “翻译” 成代码，也擅长在 console.log 里写 “求救信号”。日常状态：要么在调像素级对齐，要么在查 “为什么这个样式只在我电脑上生效”。博客不搞高深理论，只唠实在干货~
09-15 923
本文对比了前端四种常见存储方案（cookie、localStorage、sessionStorage、indexedDB）的核心差异。从存储容量、生命周期、数据共享范围、服务器交互等维度进行详细分析，指出各自适用场景：cookie适合小容量身份信息（如token），localStorage适合长期缓存（如主题设置），sessionStorage用于临时会话数据（如表单输入），indexedDB则适合存储大量结构化数据（如离线应用）。文章还解析了关键设计逻辑，并附典型面试题解答，帮助开发者深入理解存储方案选择
JavaScript的本地存储知识点详解Cookie、SessionStorage、LocalStorage、IndexedDB
谢谢你的关注
10-24 927
JavaScript的本地存储方式多种多样，每种方式都有其特定的应用场景和优缺点。开发者在选择存储方式时，应根据数据的特性（如生命周期、大小、共享范围）以及应用的需求来选择合适的存储方案。通过合理使用本地存储，可以显著提高应用的性能和用户体验。在实际开发中，还需要注意以下几点：数据安全性：对于敏感数据，应使用加密手段进行保护，避免数据泄露。数据一致性：在并发访问时，应确保数据的一致性和完整性，避免数据冲突或丢失。性能优化：对于大量数据的存储和读取，应使用高效的数据结构和算法，提高性能。
浏览器的数据六种存储方法比较 ：LocalStorage vs. IndexedDB vs. Cookies vs. OPFS vs. WASM-SQLite
coder_copy的博客
11-29 2567
我们将探索传统的方法，如Cookie，localStorage，WebSQL，IndexedDB和更新的解决方案，如OPFS和SQLite通过WebAssembly。我们比较的功能和限制，并通过性能测试，我们的目标是揭示如何快速我们可以写和读数据在Web应用程序中的各种方法。因此，您不仅有一个JavaScript进程在运行，而且有许多进程可以存在，并且可能必须在彼此之间共享状态更改，以免向用户显示过时的数据。它缺乏对复杂查询的支持，只允许覆盖索引，这使得它更像是其他库的基础层，而不是一个完全成熟的数据库。
Javascript 本地存储：cookie、sessionStorage、localStorage、indexedDB
猫老板的豆
05-20 1080
同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的（不同浏览器、同一个页面也是不共享的）。虽然 Web Storage对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie有效期、安全性、使用范围的可选属性组成。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存的cookie，不同的浏览器有不同的处理方式。
懂你网络系列7之浏览器缓存cookie,sessions,localStorage,seesioStorage,indexDB
mt811的博客
05-25 1377
一.浏览器缓存背景 由于http是一种无状态的协议，用户在浏览器上的每一次行为都将发送到服务器，而服务器却没法记住跟踪和记录这些行为，以至于相同的行为也会触发请求，这给网络通信带来了极大的性能开销。 HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态
忘记 localStorage 吧，indexedDB 才是前端存储新宠！
Jernnifer_mao的博客
06-18 468
在项目开发过程中，前端需要存储大量的数据。cookie, localstorage 都有存储长度限制。需要一个存储容量大，支持搜索和自定义索引的前端存储方案，就选用了 。 caniuse上查看 indexedDB 支持情况，目前浏览器支持情况良好。
前端本地存储数据库存储之IndexedDB
nihaio25的博客
02-24 2881
IndexedDB数据库没有我们想象的那么复杂，了解了它的几个基本概念，上手还是很快的，无非就是增删改查等等，虽然可能开发中用的少，但是了解一下不至于真正用到的时候两眼抓瞎。
[优化]用indexedDb代替localstorage本地化多语言
Madman528的博客
06-17 347
搞个Db类 再写两个触发函数,一个保存,一个获取 初始化再调用即可
前端存储方案全面对比：localStorage、sessionStorage、cookies与IndexedDB
m0_62364592的博客
02-28 1514
本文全面对比了四种主要的浏览器存储技术：localStorage、sessionStorage、Cookies和IndexedDB。文章从存储容量、数据生命周期、安全特性、操作方式和适用场景等维度进行了详细分析。localStorage适合长期存储小型偏好设置；sessionStorage用于会话临时数据；Cookies主要用于服务端交互的身份验证；而IndexedDB则适合大量结构化数据的本地存储。文章还提供了四种存储方案的标准化封装工具类，包含完整代码示例和使用场景。对于前端开发者而言，选择合适的存储方
html5本地存储 Web Storage + IndexedDB
疯林
11-24 3692
html5本地存储 Web Storage + indexDB在html5之前，前台存储主要就是cookie，cookie是有缺陷的，比如说没死请求都会带着数据，造成流量浪费；大小只有4k；明文传递不安全等等。所以 cookie的使用范围注定很小，存个登录状态之类的还是挺好用的，下面介绍一下Web Storage和indexDBWeb Storage1.localStoragelocalStor
Web Storage与IndexedDB存储
偏执的小男孩儿
05-14 610
Web Storage与IndexedDB存储
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值