localStorage和indexedDB区别

最新推荐文章于 2024-07-28 18:07:55 发布
最新推荐文章于 2024-07-28 18:07:55 发布
阅读量1.8k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdhxs/article/details/110205772
版权

localStorage和indexedDB区别

前言

两者都是在客户端存储数据，可以存储较多数据，且都是永久性保存。

不同点

  • indexedDB是JS脚本语言可以操作的数据库
  • 操作是异步的
  • IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
  • 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
  • LocalStorage 不支持搜索。

相同点

  • 可以在客户端存储永久性数据
  • 都通过键值对存储数据
Mr.Groooooooot
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sessionStorage、localStorage、IndexedDB浏览器存储的区别
weixin_43738272的博客
02-13 1114
你知道的浏览器存储有哪些，他们的区别是什么? 随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp” ——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲 美的功能和体验。WebApp 优异的性能表现，有一部分原因要归功于浏览器存储 技术的提升。cookie 存储数据的功能已经很难满足开发所需，逐渐被 WebStorage、IndexedD...
浏览器缓存库设计总结（localStorage/indexedDB）
趣谈前端
03-30 1375
前言浏览器缓存设计一直是web性能优化中非常重要的一个环节,也是SPA应用盛行的今天不得不考虑的问题.作为一名优秀的前端工程师,为了让我们的应用更流畅,...
cookies，sessionStorage , localStorage和 indexDB 的区别
wyk760629476的专栏
04-25 310
四个都是浏览器做数据缓存的 区别 存储方式 cookies sessionStorage localStorage indexDB 存储大小 4K 5M 5M 无限制 与后端联系 后端返回,在返回请求头部 无 无 无 生命周期 后端可以设置过期时间 浏览器关闭失效 手动释放 手动释放 使用 cookies sessio..
浏览器本地存储详解、 cookie、sessionStorage、localStorage、IndexedDB
最新发布
liangzhenmeng的博客
07-28 4万+
服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnly。其中 expires 指定了 cookie 失效的时间，domain 是域名、path是路径，domain 和 path 一起限制了 cookie 能够被哪些 url 访问。secure 规定了 cookie 只能在确保安全的情况下传输，HttpOnly 规定了这个 cookie 只能被服务器访问，不能使用 js 脚本访问。
oracle 去摸_ORACLE 表的操作
weixin_39517357的博客
12-19 154
一、表是Oracle常见的数据库对象Oracle中的表分为①用户定义的表：--由用户创建并维护的一组表--包含用户所需的信息②数据字典：--由Oracle server 自动创建的一组表--包含数据库信息③查询数据字典select table_name from user_tables; --查看用户定义表select distinct object_type from user_objec...
indexDB & localForage
qq_44376306的博客
09-12 720
存储量小：即使是web storage的存储量最大也只有 5M存取不方便：存入的内容会经过序列化，当存入非字符串的时候，取值的时候需要通过反序列化。当我们的存储量比较大的时候，我们一定会想到我们的 indexedDB，让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储，然而 indexedDB 的使用是比较繁琐而复杂的，有一定的学习成本，但第三方库的出现几乎抹平了这个缺陷，让我们轻松无负担的在浏览器中使用indexedDB。
浏览器储存之Cookie、sessionStorage、localStorage和indexedDB区别与详解
Tseng
11-18 1144
一般在项目中我们逗需要把信息存储在本地的情况，比如权限验证的token、用户信息、埋点计数、客户配置的皮肤信息或语言种类等，我们可以暂存一下避免浏览器不必要的请求和客户多余操作，较少请求从而提高性能以给客户使用带来方便。 那么浏览器存储有哪些方法呢，主要有cookie、localStorage、sessionStorage cookie属于文档对象模型DOM树根节点document，而 sessi...
cookies-exterminator：适用于Firefox，Pale Moon和SeaMonkey的Cookies Exterminator。 不用时自动删除cookie，localStorage和IndexedDB对象
02-05
【标题】：Cookies Exterminator 是一款专门针对Firefox、Pale Moon和SeaMonkey浏览器的扩展工具，它的主要功能是在用户停止使用浏览器时自动清除cookies、localStorage和IndexedDB对象，以保护用户的隐私。...
玩转IndexedDB，比localStorage、cookie还要强大的网页端本地缓存
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-14 279
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
IndexedDB增删改查插件，分别对增删改查进行了封装，调用对应的函数即可
06-05
在浏览器上有两种数据库：webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库，webSQL基本上已经废弃了，具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API，用于在客户端...
session Storage、local Storage和IndexedDB的区别
Daisy花园
05-14 2155
session Storage会话存储，只有在浏览器被关闭前使用，创建另一个页面的时候使用，是临时保存，一旦关闭浏览器就会失效。local Storage本地存储，可以长期存储数据，没有时间限制 目前支持local Storage的浏览器有: Chrome 4+ safari 4+ Firefox 1.5+ Opera 10.5+ IE8+以及IE7的兼容模式IndexedDB相对于Local
localstorage、sessionstorage、indexedDB的特点和应用场景
_
01-27 3383
什么样的数据应该保存在本地存储中呢？有以下几个原则： 只保存重要页面的重要数据典型的，首页首屏对业务庞大的站点，这点尤其重要 极大提高用户体验的数据比如表单的状态，可以提交之前保存，当用户刷新页面时可以还原静态资源，比如 js 和 css 一个请求一个 key 值（一个 cgi 一个 key 值）避免请求链接加参数的 key ([http://request-ajax.cgi[params])，这样必然让](http://request-ajax.➜[params]%29%2C-yt23ad46hp3
HTML 本地存储（localStorage sessionStorage IndexedDB）
洪海洋的博客
01-22 522
localStorage 是同源存储的，除非满了或者 js 手动删除，否则永远存在； sessionStorage “sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一
前端本地存储数据库存储之IndexedDB
nihaio25的博客
02-24 1865
IndexedDB数据库没有我们想象的那么复杂，了解了它的几个基本概念，上手还是很快的，无非就是增删改查等等，虽然可能开发中用的少，但是了解一下不至于真正用到的时候两眼抓瞎。
cookie
klji234的博客
04-21 601
cookie各字段含义，与token,session的联系。与localStorage与sessionStorage的异同。
html5本地存储 Web Storage + IndexedDB
疯林
11-24 3597
html5本地存储 Web Storage + indexDB在html5之前，前台存储主要就是cookie，cookie是有缺陷的，比如说没死请求都会带着数据，造成流量浪费；大小只有4k；明文传递不安全等等。所以 cookie的使用范围注定很小，存个登录状态之类的还是挺好用的，下面介绍一下Web Storage和indexDBWeb Storage1.localStoragelocalStor
面试官：Javascript本地存储的方式有哪些？区别及应用场景
海阔天空
04-20 1031
在这里插入代码片 vaScript本地缓存的方法我们主要讲述以下四种： cookie sessionStorage localStorage indexedDB cookie Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题 作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成 但是cookie在每次请求中都会被
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 1124
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
web存储详解（cookie、sessionStorage、localStorage、indexedDB）_什么是web存储
2401_84562041的博客
05-17 1308
web存储指的是在web通信过程中，由客户端（如浏览器）对少量数据进行的本地存储（注：本文所说的是广义的web存储，而不单指Web Storage）。web存储类型主要包括古老的cookie，以及HTML5推出的sessionStorage、localStorage和indexedDB等。web存储的宿主环境通常是浏览器，借助浏览器提供的JavaScript接口，我们可以实现对这些数据的增删改查。
使用浏览器提供的localStorage或IndexedDB存储一个随机生成的唯一标识符，每次访问网站时从存储中读取。
06-13
是的，这是一种获取浏览器不变的唯一标识符的方法。具体实现可以参考以下代码： ```javascript // 生成一个随机的唯一标识符 function generateUUID() { var d = new Date().getTime(); var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } // 检查浏览器是否支持localStorage或IndexedDB function isLocalStorageSupported() { try { var testKey = 'test'; var storage = window.localStorage; storage.setItem(testKey, '1'); storage.removeItem(testKey); return true; } catch (error) { return false; } } function isIndexedDBSupported() { return 'indexedDB' in window; } // 从localStorage或IndexedDB中读取唯一标识符 function getUniqueID() { var uniqueID = ''; if (isLocalStorageSupported()) { var storage = window.localStorage; uniqueID = storage.getItem('uniqueID'); if (!uniqueID) { uniqueID = generateUUID(); storage.setItem('uniqueID', uniqueID); } } else if (isIndexedDBSupported()) { var request = window.indexedDB.open('uniqueID', 1); request.onerror = function(event) { console.log('Failed to open indexedDB'); }; request.onupgradeneeded = function(event) { var db = event.target.result; var objectStore = db.createObjectStore('uniqueID', { keyPath: 'id' }); var uniqueID = generateUUID(); objectStore.add({ id: 1, value: uniqueID }); }; request.onsuccess = function(event) { var db = event.target.result; var transaction = db.transaction(['uniqueID'], 'readwrite'); var objectStore = transaction.objectStore('uniqueID'); var getRequest = objectStore.get(1); getRequest.onsuccess = function(event) { if (getRequest.result) { uniqueID = getRequest.result.value; } else { uniqueID = generateUUID(); objectStore.add({ id: 1, value: uniqueID }); } }; }; } else { uniqueID = generateUUID(); } return uniqueID; } ``` 以上代码中，`generateUUID()`函数用于生成一个随机的唯一标识符，`isLocalStorageSupported()`和`isIndexedDBSupported()`函数用于检查浏览器是否支持localStorage或IndexedDB，`getUniqueID()`函数用于从localStorage或IndexedDB中读取唯一标识符，如果没有则生成一个新的唯一标识符并存储到localStorage或IndexedDB中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值