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

最新推荐文章于 2023-12-27 20:06:11 发布
最新推荐文章于 2023-12-27 20:06:11 发布
阅读量840 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhexiaode/article/details/104167638
版权
  • IndexedDB就是前端数据库，在浏览器中采用key-value键值方式存储数据。
  • 我们经常用的缓存APIlocalStorage和sessionStorage，能满足我们开发时的绝大多数需求，简单的键值存储，但是它们有它们的限制：
* 存储空间限制，只有5M
* 只能存储字符串
* 存储的字段一多就很难管理，存储的字段也无法产生关联
  • IndexedDB的存储空间原则上没有限制，它本质上还是一个数据库，可以存储大量结构化数据（包括文件/blobs）,同时IndexedDB API通过索引的方式实现了数据的高性能搜索。使用比localStorage、sessionStorage复杂得多。
  • 应用场景，不需要网络连接的纯离线应用，比如Todolist这类的用来记录待办任务类型的应用。

资料：

anj3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端存储除了 localStorage 还有啥
semlinker的博客
06-22 509
本文介绍一些与前端数据存储有关，有趣、好玩、有用的开源库。除此之外，还会让你掌握各种 Web 存储方案的特点，赶紧来了解一下。 在介绍目前比较流行的一些开源的前端存储方案之前，阿宝哥先分享一些与存储有关，有趣好玩的开源库。 一、有趣好玩的开源库 1.1 Sharedb Realtime database backend based on Operational Transformation (OT)。 https://github.com/share/sharedb ShareDB 是一个基于 JS.
storage:具有多个后端的异步浏览器存储（IndexedDB、WebSQL、localStorage）
06-19
这意味着它是一个具有多个后端（IndexedDB、WebSQL、localStorage）的异步浏览器存储，旨在提供更好的离线体验。 与localForage的主要区别： 批量获取/设置支持 回调或承诺 浏览器友好 受启发的简单 API 发展...
IndexedDB, 支持浏览器缓存
07-19
IndexedDB，支持浏览器缓存
JS本地持久化
最新发布
m0_62943934的博客
12-27 486
存储的数据将以键值对的形式存储在浏览器的本地存储中，并且在浏览器关闭后仍然可用。是一个简单方便的选择。如果需要存储大量的数据，并进行复杂的查询和索引，则可以考虑使用。取决于你的具体需求。如果只是简单地存储少量的数据，并且不需要进行复杂的查询操作，需要先打开数据库，并创建事务和存储对象，然后可以使用存储对象的。要将数据持久化到本地存储中，可以使用浏览器提供的。是一种更底层的存储机制，相比于。提供了更多的功能和灵活性。
localstorage、sessionstorage、indexedDB的特点和应用场景
_
01-27 3299
什么样的数据应该保存在本地存储中呢？有以下几个原则： 只保存重要页面的重要数据典型的，首页首屏对业务庞大的站点，这点尤其重要 极大提高用户体验的数据比如表单的状态，可以提交之前保存，当用户刷新页面时可以还原静态资源，比如 js 和 css 一个请求一个 key 值（一个 cgi 一个 key 值）避免请求链接加参数的 key ([http://request-ajax.cgi[params])，这样必然让](http://request-ajax.➜[params]%29%2C-yt23ad46hp3
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...
详解JavaScript中的嵌入式数据库
Free雅轩的博客
09-20 531
扩展这些数据库，保持信息的一致性和容错性本身就是一个挑战。但是，当我们的数据需求非常小时会发生什么？ 我们习惯于将数据库视为巨大的存储平台，我们可以在其中存储我们需要的所有数据，然后通过某种形式的查询语言检索它。扩展这些数据库，保持信息的一致性和容错性本身就是一个挑战。但是，当我们的数据需求非常小时会发生什么? 当RedShift、BigQuery、甚至MySQL对我们微小的数据需求来说是一个太大的解决方案时，会发生什么?好吧，事实证明，有一个应用程序可以解决这个问题。事实上，有很多选择，所以在这里，我
一张图了解浏览器存储 Cookies vs Web Storage vs IndexedDB
郎涯技术
01-16 226
【代码】一张图了解浏览器存储 Cookies vs Web Storage vs IndexedDB。
前端浏览器数据库indexedDB入门教程
weixin_41223912的博客
10-24 802
概要 最近在刷红宝书的时候发现indexedDB部分的讲解有点混乱，且书上的用法和目前网上教程的用法差距还是蛮大的，读起来可能不是很好懂，他别是setVersion（）方法，我写了半天也用不了，上网查询之后request = indexedDB.open("admin",17);打开数据库的同时就可以创建版本号了。 indexedDB IndexedDB是HTML5规范里新出现的浏览器里内置的数据...
前端存储总结
点点的博客
06-29 1198
一、题记：你除了用过 Cookies、localStorage 和 sessionStorage 外，还有用过其它的存储方式么？其实除了前面提到的 3 种存储方式，目前主流的浏览器还支持 Web SQL 和 IndexedDB。 二、Sharedb 开源地址：https://github.com/share/sharedb ShareDB是基于JSON文档的操作转换（OT）的实时数据库后端。它是DerbyJS Web应用程序框架的实时后端，共享数据库。 应用：实时查询订阅、实时排行榜、点赞等。 三、 Imm
前端本地存储数据库存储之IndexedDB
nihaio25的博客
02-24 1669
IndexedDB数据库没有我们想象的那么复杂，了解了它的几个基本概念，上手还是很快的，无非就是增删改查等等，虽然可能开发中用的少，但是了解一下不至于真正用到的时候两眼抓瞎。
clientchannel：通过IndexedDB或LocalStorage在选项卡之间存储和同步值
02-16
客户频道 通过IndexedDB或LocalStorage在选项卡之间存储和同步数据。特征使用IndexedDB或LocalStorage存储和还原数据。 标签之间的跨数据绑定。 每个数据的有效期限。演示版存储和同步文本和画布。蜜蜂用法持续数据...
indexeddb-promise:使用Promise封装IndexedDB
05-19
1. 安装npm包// use npmnpm install --save-dev indexeddb-promise// use yarnyarn add --dev indexeddb-promisescript引入IndexedDB 会被注册为一个全局变量。建议链接到一个可以手动更新的指定版本号：[removed]...
IndexedDB增删改查插件，分别对增删改查进行了封装，调用对应的函数即可
06-05
官网上的这句话也很简单明了，意思就是IndexedDB主要用来客户端存储大量数据而生的，我们都知道cookie、localstorage等存储方式都有存储大小限制。如果数据量很大，且都需要客户端存储时，那么就可以使用IndexedDB...
用iframe方式为页面加载完毕前显示等待提示
anjun_xf的专栏
08-31 1万+
需求：b.aspx是个大页面要加载很多数据，加载期间会假死一会，页面一片空白啥也不能操作，为了更好的用户体验，怎么在页面上加上“请等待”的提示呢？ 思路：使用iframe开发模拟AJAX，步骤：父页面（有等待提示）嵌iframe；iframe加载完毕后用js隐藏父页面的提示。 代码 父页面代码： <meta charset="utf-8&am
HTML表头冻结
anjun_xf的专栏
08-15 5700
html冻结表头方案： HTML Table锁定表头（CSS实现）–可以但是不傻瓜。 表头冻结–纯jQuery，支持横、竖出现滚动条 jquery固定表头不滚动让内容滚动的代码实现——里面jQuery可以放到js文件引用，此版最接近实际需求，不用加太多css。如果没有可以通过key“Praesent vitae ligula nec orci pretium vestibulum”在百度上搜索...
jQuery Excel插件：jQuery.jexcel.js单元格内容转json
anjun_xf的专栏
07-24 4462
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="http://
chrome的F12（开发者工具）介绍
anjun_xf的专栏
12-09 3099
视频chrome f12调试功能笔记： Elements，调试“HTML、CSS”多在此操作。前端设计师用的多。 选中一个页面元素，然后右键copy outerHTML，获得选中元素及其子元素的html代码，copy seletor获得选中元素的css层次选择器。 Styles选项卡，可以直接修改元素样式并立刻看效果。 NetWork，查看页面上引用的所有的各类资源URL（all–...
AlaSQL
anjun_xf的专栏
10-28 2392
AlaSQL-是一个轻量级的客户端内存SQL数据库，旨在在浏览器和Node.js中使用。 AlaSQL使用纯JavaScript编写，不使用浏览器WebSQL数据库。 AlaSQL是一个功能齐全的紧凑型sql服务器，具有JOIN，GROUP，UNION，ANY，ALL，IN，、子查询和非常有限的事务支持。 AlaSQL支持ROLLUP(), CUBE() 和 GROUPING SETS()...
localstorage设置过期时间_web存储sessionStorage, localStorage，indexDB
05-24
localStorage 和 sessionStorage 是 Web 存储 API 中的两种不同类型的存储方式，它们都是基于键值对的存储方式。其中 localStorage 是持久化存储，数据不会过期，除非手动清除或者用户清除浏览器缓存；而 sessionStorage 是会话存储，数据只在当前会话有效，关闭浏览器或者标签页后会被删除。 localStorage 和 sessionStorage 都没有提供直接设置过期时间的方法。但可以通过在存储时记录时间戳，然后在获取时判断是否过期来实现类似的功能。示例代码如下： ```javascript //设置localStorage localStorage.setItem('key', JSON.stringify({ value: 'value', expiredAt: new Date().getTime() + 1000 * 60 * 60 //过期时间为1小时后 })); //获取localStorage var data = JSON.parse(localStorage.getItem('key')); if (data.expiredAt < new Date().getTime()) { //过期了 localStorage.removeItem('key'); } else { //未过期 console.log(data.value); } ``` 对于 indexDB，也没有提供直接设置过期时间的方法，但可以在存储时记录过期时间戳，并在获取时进行判断和删除。示例代码如下： ```javascript //打开数据库 var request = window.indexedDB.open('myDB', 1); request.onsuccess = function(event) { var db = event.target.result; //获取对象仓库 var store = db.transaction(['myStore'], 'readwrite').objectStore('myStore'); //设置过期时间为1小时后 var expiredAt = new Date().getTime() + 1000 * 60 * 60; //存储数据 store.put({ key: 'key', value: 'value', expiredAt: expiredAt }); //获取数据 store.get('key').onsuccess = function(event) { var data = event.target.result; if (data.expiredAt < new Date().getTime()) { //过期了，删除数据 store.delete('key'); } else { //未过期 console.log(data.value); } }; }; ``` 需要注意的是，以上示例代码只是一种简单的实现方式，具体实现还需要考虑数据量、性能、数据安全等方面的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值