session Storage、local Storage和IndexedDB的区别

最新推荐文章于 2025-04-06 02:42:40 发布
最新推荐文章于 2025-04-06 02:42:40 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： html5 文章标签： html session indexedDB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_25127047/article/details/51404459
版权

session Storage

会话存储，只有在浏览器被关闭前使用，创建另一个页面的时候使用，是临时保存，一旦关闭浏览器就会失效。

local Storage

本地存储，可以长期存储数据，没有时间限制
目前支持local Storage的浏览器有:
Chrome 4+ safari 4+ Firefox 1.5+ Opera 10.5+
IE8+以及IE7的兼容模式

IndexedDB

相对于Local Storage（Dom Storage）来说，IndexedDB用于客户端的大量结构化数据的存储，而Local Storage属于小数据量的存储。
IndexedDB的特性包括：
- 一个域一个datatable
- key-valuede检索方式
- 建立在关系型的数据模型之上，具有索引表、游标、事务等概念

总而言之，IndexedDB属于大数据量的存储，Local Storage属于小数据量的存储。
在webkit中，Local Storage初始化后，数据全部被读入内存，其后的操作都是针对内存操作。但存在后来同步线程将数据写入sqlite3数据库，因此Local Storage API是同步操作。
而，IndexedDB初始化时数据不能全部读入内存中，采用标注的数据库读写方式，在windows下是异步操作，worker下是同步操作。

这三个例子的测试代码，可以pull我的git，有演示
https://github.com/daisyHawen/Html5-storage

Cookies、Local Storage、Session Storage、WebSQL 和 IndexedDB
悟已往之不谏，知来者之可追
09-07 708
本地存储，在浏览器中包括了 Cookies、Local Storage、Session Storage、WebSQL 和 IndexedDB 这 5 种形式的本地存储，它们之间的区别: Cookies Cookies 是最早的本地存储，是浏览器提供的功能，并且对服务器和 JS 开放，这意味着我们可以通过服务器端和客户端保存 Cookies。不过可以存储的数据总量大小只有 4KB，如果超过了这个限...
浏览器数据存储 Local Storage, Session Storage, IndexedDB ,WebSQL, Cookies
Loria1的博客
12-05 1163
浏览器存储方式这么多，可我以前却独宠Local Storage一人，但是了解到IndexedDB的时候，我觉得我要变心了，我果然不是一个专一的人？？？？（？）参考其它资料对几种数据存储的分析，我自己给自己做个总结。 浏览器的存储方式有这些： 首先结合网上资料对几种存储方式做个分析。 Local Storage localStorage（本地存储）是HTML5的的WebStorage提供...
indexDB & localForage
qq_44376306的博客
09-12 995
存储量小：即使是web storage的存储量最大也只有 5M存取不方便：存入的内容会经过序列化，当存入非字符串的时候，取值的时候需要通过反序列化。当我们的存储量比较大的时候，我们一定会想到我们的 indexedDB，让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储，然而 indexedDB 的使用是比较繁琐而复杂的，有一定的学习成本，但第三方库的出现几乎抹平了这个缺陷，让我们轻松无负担的在浏览器中使用indexedDB。
JavaScript 深入解析sessionStorage：特性、应用与最佳实践
最新发布
A_Kamen的博客
04-06 1299
需要自动清理的敏感数据单次会话状态保持页面间临时参数传递使用原则始终假设存储空间有限敏感信息必须加密配合页面生命周期管理数据重要数据应有服务端备份对于需要持久化存储的场景，建议结合IndexedDB或localStorage实现分层存储架构。正确使用sessionStorage能显著提升用户体验，同时保障数据安全性。
localStorage和indexedDB区别
wdhxs的博客
11-26 2053
localStorage和indexedDB区别 前言 两者都是在客户端存储数据，可以存储较多数据，且都是永久性保存。 不同点 indexedDB是JS脚本语言可以操作的数据库 操作是异步的 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。 LocalS
Local Storage，Session Storage，IndexedDB，Web SQL，Cookies简介
calm_encode的博客
06-10 691
一 概述 Local Storage，Session Storage，IndexedDB，Web SQL，Cookies都是浏览器中具有实现前端本地存储功能的介质。在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了Web Storage（Local Storage和Session Storage）与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化.
HTML5本地存储——IndexedDB
2301_77162959的博客
06-05 398
这就是关于indexedDB的基本使用方式，很多同学看了会觉得很鸡肋，和我们正常自己定义个对象使用没什么区别，也就是能保存在本地罢了，这是 因为我们还没有介绍indexedDB之所以称为indexed的杀器——索引，这个才是让indexedDB大显神通的东西，下篇我们就来看看这个杀器。在HTML5本地存储——IndexedDB（一：基本使用）中介绍了关于IndexedDB的基本使用方法，很不过瘾，这篇我们来看看indexedDB的杀器——索引。
HTML5本地存储之IndexedDB
12-14
对于只存储某些字段的需求来说，可以使用Local Storage和 Session Storage来完成。但是一旦存储大量的数据，Local Storage和 Session Storage就远远不能满足需求了。这时，IndexedDB的强大之处就会体现出来了。 1、...
React-JS-Session-Storage-dan-Local-Storage
03-08
另外，大量数据存储可能影响加载速度，因此要适度使用，并考虑使用服务端存储或更高级的解决方案，如IndexedDB，对于复杂的数据存储需求。 总的来说，`sessionStorage`和`localStorage`是React开发中实现数据持久化...
面试官：Javascript本地存储的方式有哪些？区别及应用场景
海阔天空
04-20 1090
在这里插入代码片 vaScript本地缓存的方法我们主要讲述以下四种： cookie sessionStorage localStorage indexedDB cookie Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题 作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成 但是cookie在每次请求中都会被
cookie，localStorage，sessionStorage，indexDB区别
zhaoyahui的博客
09-20 838
特性 cookie localStorage sessionStorage indexDB 数据生命周期 一般由服务器生成，可以设置过期时间 除非被清理，否则一直存在 页面关闭就清理 除非被清理，否则一直存在 数据存储大小 4K 5M 5M 无限 与服务端通信 每次都会携带在 header 中，对于请求...
浏览器端数据库存储方案的整理 -- indexDB 和 localStorage
weixin_33994444的博客
06-02 1170
查看原文 有些安全性不太重要的数据，我不想花大力气搞一台服务器，再安装mysql或者 monogdb，再写点rest接口。这也太麻烦了，浏览器里本来就有很好用的数据库。你为什么不尝试一下呢？ 1. 客户端存储目前有两个方案比较 方案 优点 缺点 localStorage 简单易用，同步操作 存储容量小，一般不超过10MB i...
浅谈WebView利用localStore websql和IndexDB 来存储数据
热门推荐
氵青-风的博客
05-05 1万+
最近做一个webapp，需要将webview的数据存储到本地数据库，鉴于Android和webview传递大量数据比较麻烦，所以干脆直接存储在webview内置的本地数据库算了。 LocalStore 没有时间限制的本地存储，是上面三种存储方式中浏览器默认存储的容量最小的，也是最容易使用的，直接一句话完成存储过程。 存储数据：localStorage.XXX=YYYXXX可以随便命名，YYY是
前端本地缓存知识：indexDB、localStorage、sessionStorage
weixin_42527398的博客
01-16 4364
前端缓存 在实习的时候接触过一个需求是，要求用户在离线状态下也能打开客户端查看部分数据，并对数据进行操作，在联网后向服务器同步操作更新服务器的数据。因此在对前端进行本地数据的存储进行调研，了解到以下的技术，总结以下自己的学习。 1.indexDB 首先indexDB是一个运行在浏览器的非关系型数据库，作为一个数据库，它存储的数据量就是没有上线的，同时它不仅可以存储字符串，还可以存储二进制数据。 主要特点 1 键值对存储：indexDB内部采用对象仓库存放数据。所有类型的数据都可以直接存入，包括Java
前端存储cookie、session、localStorage、sessionStorage、IndexedDB
qq_41732963的博客
08-16 1210
cookie 定义： HTTP Cookie（也叫 Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。cookie使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。 特点： ①.大小受限制，cookie的大小被限制在4KB ②.可以设置过期时间 ③.同一个域名下存放的cookie的数量是有限的，一般为20个，不同浏览器不
【浏览器】端数据库存储方案----indexDB、localForage
weixin_42910765的博客
08-31 744
localStorage 只是使用了其功能中的一部分，很多功能受限，如：localStorage 一次只能存一个字段。而业界普遍的前端都是与页面打交道的，数据库操作属于后端的后端了，离的有些远，于是，很多前端都不了解，需要从零开始的数据库学习；说到本地存储数据，首先想到的是 localStorage，应该很多小伙伴都用过，使用很简单。localforage 的作用就是用来规避上面 localStorage 的缺点，同时保留 localStorage 的优点而设计的。
localstorage、sessionstorage、indexedDB的特点和应用场景
_
01-27 3514
什么样的数据应该保存在本地存储中呢？有以下几个原则： 只保存重要页面的重要数据典型的，首页首屏对业务庞大的站点，这点尤其重要 极大提高用户体验的数据比如表单的状态，可以提交之前保存，当用户刷新页面时可以还原静态资源，比如 js 和 css 一个请求一个 key 值（一个 cgi 一个 key 值）避免请求链接加参数的 key ([http://request-ajax.cgi[params])，这样必然让](http://request-ajax.➜[params]%29%2C-yt23ad46hp3
cookie、localSrorage、session、indexDB 的区别
舒梵的博客
08-24 271
名称 数据生命周期 存储大小 与服务端通信 cookie 由服务器生成，可设置过期时间 4K 每次都会携带在header 中，对于请求性能影响 localSrorage 需手动清除，否则⼀直存在 5M 不参与 session ⻚⾯关闭就清理 5M 不参与 indexDB 需手动清除，否则⼀直存在 4K 不参与 ......
浏览器数据库——IndexedDB的使用
QiuXiang_的博客
08-24 869
IndexedDB（Indexed Database）是一种用于在浏览器中存储和管理结构化数据的Web API。它提供了一种持久性的客户端存储解决方案，允许Web应用程序在浏览器中存储大量的数据，以便在不同的浏览会话之间保持状态、离线使用数据以及缓存数据。
IndexedDB是永久存储？
12-10
4. **存储限制**：浏览器对IndexedDB的存储大小有一定限制，虽然这些限制通常比Local Storage大得多，但仍然存在。 因此，虽然IndexedDB在大多数情况下可以提供持久化存储，但其数据并不完全不受用户操作和浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值