前端的存储：websql和indexedDB

最新推荐文章于 2024-08-30 23:56:45 发布
最新推荐文章于 2024-08-30 23:56:45 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39969226/article/details/104003625
版权
本文介绍了前端存储的两个重要组件：WebSQL（已废弃但可在Chrome中使用）和IndexedDB。WebSQL基于SQLite，提供关系型数据库存储，而IndexedDB则是一种NoSQL存储方式，容量远超localStorage。内容包括两者的基本操作如创建数据库、插入和查询数据，以及它们的特点，如WebSQL的版本控制和IndexedDB的索引创建。还提及了IndexedDB的封装库以简化API使用。
摘要由CSDN通过智能技术生成

关于存储，我们大多都知道存储的老伙计localStorage和sessionStorage、cookie等

今天就继续了解下websql和indexedDB的使用(js的红宝书上有详细介绍)

WebSQL:(不再维护，当扩展看看就好)

其弥补前端的关系型存储。底层实现是通过sqlite这个轻量级的数据库。

只有极少数的浏览器支持(chrome等)【其他浏览器不去实现是因为webSQL这个标准不再维护了。】

1.创建数据库：

参数说明：数据库的名字、版本、备注、存储容量的限制(chrome中无论填多少都是5M)

2.创建表：

最低0.47元/天 解锁文章
醒不了的星期八
关注
专栏目录
前端数据库——WebSQL和IndexedDB
十年代码写十年
09-30 479
一、WebSQL WebSQL是前端的一个独立模块，是web存储方式的一种，我们调试的时候会经常看到，只是一般很少使用。 兼容性:当前只有谷歌支持，ie和火狐均不支持。 我们对数据库的一般概念是后端才会跟数据库打交道，进行一些业务性的增删改查。而这里的数据库也...
IndexedDB和webSQL
summer942zjb的博客
09-02 644
IndexedDB 小结 容量大，nosql，同域共享 api复杂 可建立索引 存储大小： 桌面端50M，移动端5M 使用 var request = window.indexedDB.open('db', 1);// 打开名字为db的数据库，没有的话会创建一个 var db; // onsuccess 监听数据库打开事件 每次打开成功都会触发 request.onsuccess = function (e) { db = request.result; console.log
HTML5本地存储——Web SQL Database与indexedDB
weixin_33901843的博客
01-04 167
　　虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。我们经常在数据库中处理大量结构化数据，html5引入Web SQL Database概念，它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范...
探索未来SQL Web：Absurd SQL - 将SQLite持久化至IndexedDB
gitblog_00389的博客
08-12 412
探索未来SQL Web：Absurd SQL - 将SQLite持久化至IndexedDB absurd-sqlsqlite3 in ur indexeddb (hopefully a better backend soon)项目地址:https://gitcode.com/gh_mirrors/ab/absurd-sql 在Web开发中，数据库的使用一直是关键的一环。如今，我们有一个非常有趣且...
HTML5 Web SQL Database 与 Indexed Database 的 CRUD 操作
蘑蘑茶
12-02 328
http://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5db/   Web SQL Database 和 Indexed Database 都是在客户端存储大量结构化数据的解决方案。Web SQL Database 实现了传统的基于 SQL 语句的数据库操作，而 Indexed Database 实现了 NoSQL ...
web sql & IndexedDB
qq_39740095的博客
06-30 956
web sql & IndexedDBweb sql说明弊端使用1、创建数据库2、创建表3、向表中插入数据4、读取数据5、更新表格数据IndexedDB说明indexedDB本地存储优势弊端使用1.创建表2.插入数据3.修改数据4.删除数据5.获取数据封装品断网、刷新续传 web sql 说明 底层实现是通过sqllite这个轻量级的数据库。 浏览器刷新，数据库和库里的表丢失。再次创建同名的数据库，库里的表及表里的数据仍然存在。 webSQL:1.标准不再更新，关系型、底层sqlite。 2. c
说说浏览器缓存里的websql与 indexeddb
听闻青春丶
04-12 8712
首先明确h5缓存的几种形式： 1、本地存储(localstorage && sessionstorage)本地存储(localstorage && sessionstorage) 2、离线缓存(application cache)； 3、websql与 indexeddb WebSQL也是一种在浏览器里存储数据的技术,跟IndexedDB不同的...
IndexedDB增删改查插件，分别对增删改查进行了封装，调用对应的函数即可
06-05
在浏览器上有两种数据库：webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库，webSQL基本上已经废弃了，具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API，用于在客户端...
浏览器数据存储 Local Storage, Session Storage, IndexedDB ,WebSQL, Cookies
Loria1的博客
12-05 1056
浏览器存储方式这么多，可我以前却独宠Local Storage一人，但是了解到IndexedDB的时候，我觉得我要变心了，我果然不是一个专一的人？？？？（？）参考其它资料对几种数据存储的分析，我自己给自己做个总结。 浏览器的存储方式有这些： 首先结合网上资料对几种存储方式做个分析。 Local Storage localStorage（本地存储）是HTML5的的WebStorage提供...
【前端面试】一篇讲透客户端存储——IndexedDB、Cookie……
hhhh
08-20 1129
IndexedDB 是一种在用户浏览器中运行的客户端存储技术，它允许网页应用程序存储大量结构化数据。IndexedDB 存储空间的底层实际上是使用用户的本地文件系统来存储数据的。：IndexedDB 数据存储在用户的文件系统中，但具体位置对于用户来说是抽象的，并且由浏览器管理。：浏览器为每个域（或称为源）创建和管理一个或多个数据库文件。这些文件通常位于用户的个人文件夹中，例如在 Linux 上，或者在 Windows 上的AppData目录下。
数据交互系列：indexDB和WebSQL客户端离线存储大量数据
Code_King006的博客
06-02 2161
随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量的数据存储在客户端，这样可以减少服务端获取数据，直接从本地获取数据。现有的浏览器数据存储方案cookie 大小不超过4kbLocalStorage 大小在2.5M到10M之间(各家浏览器不同)，而且只存储键值对，不提供搜索功能，不能建立自定义的索引。MDN官网是这样解释indexedDB的。
十分钟了解websql和indexedDB
缘友一世的博客
06-15 4078
websql和indexed DB简介 1.7 删除数据 动态删除[删除指定的数据id也可以是动态的] 1.8 更新数据 id设置为动态 1.9 控制台输出 onupgradeneeded只在创建的时候触发，是唯一能声明表结构的地方。 createObjectStore方法只能在这个回调中使用 2.5 添加数据 2.6 修改数据 2.7 删除数据【该种删除只能删除一条数据，必须传入主键】 2.8 查询数据 2.9小结...
保存大量数据用sqllite还是indexdb
最新发布
qq_34874784的博客
08-30 461
**用户体验**：SQLite 通常提供更快的查询性能，但如果应用在 Webview 中运行，使用 IndexDB 可能会提供更好的用户体验，因为它不会阻塞主线程。- **如果你的应用主要运行在 H5 环境或 Webview 中**，并且需要一种轻量级的解决方案来存储大量数据，IndexDB 可能更适合。- **如果应用是编译到原生平台的**（如 iOS 或 Android），并且需要高性能的数据处理，那么 SQLite 可能是更好的选择。- 适用于需要离线存储、复杂查询和事务管理的应用。
Web SQL Database 与 Indexed Database
宁静致远
03-06 1661
文章一,HTML5 内置本地数据库之Sqlite 一、关于HTML5和web本地数据库 SQLite 可以很好的支持关系型数据库所具备的一些基本特征，如标准SQL语法、事物、数据表和索引等，且占用资源较少，可在移动设备上轻松使用。  HTML5中添加了很多功能，将一些以前必须保存在服务器上的数据转向本地保存，提高了Web应用程序性能的同时还减轻了服务器的负担。然而关于Web SQL
web页面和本地数据对比问题
weixin_34044273的博客
05-23 622
缘起 最近工作上出现了遇到了几个类似的问题：页面上有值，excel里有值，需要比较二者是否一致。小麻烦有：1.对于页面上的值，有时是页面表格里的一列或几列，无法直接勾选并复制出来。即便复制出来，也很不整齐。2.数据多，只以肉眼比较，让人怀疑人生。 对策 记录下自己目前的解决方案：1.用Chrome的开发者工具，在network一页中，查看POST的内容，得到json字符串。 也可以用Chr...
浏览器的IndexedDB本地存储续
图图小淘气的博客
11-27 171
IndexedDB 中文教程 https://www.tangshuang.net/3735.html 续： <script type="text/javascript"> const request = window.indexedDB.open('mydb', 1); let db; request.onsuccess = e => { db = e.target.result console.log(db); } request.onerro
Electron使用 SQLite
hawk2014bj的博客
05-03 1984
在客户端开发中，无论是 PC 端，还是手机端，为了能够访问离线数据，数据经常需要保存到本地，IndexDB 可以用于存储本地数据，IndexDB 是一个对象存储，数据是以 key:value 的形式进行存储和访问的，相对于关系型数据库，访问速度快，但是结构简单。对于一些复杂的模型，多表关联关系，用 IndexDB 实现会相对复杂，需要通过查询实现。SQLite是客户端常用的文件型关系数据库，主流的移动端、桌面应用大多使用的 SQLite进行离线数据存储，例如微信。main.js 主线程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

醒不了的星期八

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

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

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

打赏作者

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

抵扣说明：

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

余额充值