indexeddb

目录 html代码 css代码 JavaScript代码 在chrome(版本 70.0.3538.110)测试正常 编写涉及：css, html, js 在线演示codepen html代码 <h1>indexedDB</h1> <h2>在 DevTools 的 Application 中查看数据库信息</h2> <button onclick="addDBData()">添加数据</button> <div> <button onclick="getDBData()">获取数据</button> <input type="text" id="getID" placeholder="请输入ID"> </div> <div> <button onclick="delDBData()">删除数据</button> <input type="text" id="delID" placeholder="请输入ID"> </div> <div> <button onclick="updateDBData()">更新数据</button> <input type="text" id="updateID" placeholder="请输入ID"> </div> <div id="display"></div> css代码 button { margin: 10px 0; padding:

IndexedDB具有以下特点。 （1）键值对储存。 IndexedDB内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。在对象仓库中，数据以“键值对”的形式保存，每一个数据都有对应的键名，键名是独一无二的，不能有重复，否则会抛出一个错误。 （2）异步。 IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作，这与localStorage形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。 （3）支持事务。 IndexedDB支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回到事务发生之前的状态，不存在只改写一部分数据的情况。 （4）同域限制 IndexedDB也受到同域限制，每一个数据库对应创建该数据库的域名。来自不同域名的网页，只能访问自身域名下的数据库，而不能访问其他域名下的数据库。 （5）储存空间大 IndexedDB的储存空间比localStorage大得多，一般来说不少于250MB。IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox则没有上限。 （6）支持二进制储存。 IndexedDB不仅可以储存字符串，还可以储存二进制数据。 目前，Chrome 27+、Firefox

IndexedDB 浏览器数据库 <script> // 数据库数据建立过程 // 1. 新建数据库 var db; // 删除数据库信息 // window.indexedDB.deleteDatabase('project'); 如图删除数据库 project ： // 打开数据库 var DBOpenRequest = window.indexedDB.open('project', 1); // 如果没有当前数据库会自动创建，版本号如果改变会对数据库自动数据库升级； // 表示数据库打开成功： DBOpenRequest.onsuccess = function(event) { // 存储数据结果 db = DBOpenRequest.result; // 成功后才可以对数据库进行操作，不然会报错； // add(); // 新增数据 // read(); // 读取数据 // update(); // 更新数据 // remove(); // 删除数据 // readAll(); // 遍历数据 nameSearch(); // 使用索引搜索 console.log(' 存储数据结果 1'); }; // 表示数据库打开失败： DBOpenRequest.onerror = function (event) { console.log(' 数据库打开报错 '); };

　　虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。我们经常在数据库中处理大量结构化数据，html5引入Web SQL Database概念，它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite。这个文档曾经在W3C推荐规范上，但规范工作已经停止了。目前已经陷入了一个僵局：目前的所有实现都是基于同一个SQL后端（SQLite），但是我们需要更多的独立实现来完成标准化。 接下来将和W3C力推的IndexedDB做比较，看看为什么要废弃这种方案。Web SQL Database 规范中定义的三个核心方法： openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象 transaction：这个方法允许我们根据情况控制事务提交或回滚 executeSql：这个方法用于执行SQL 查询。 openDatabase 我们可以使用这样简单的一条语句，创建或打开一个本地的数据库对象 var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

客户端持久化解决方案：indexedDB indexedDB适合大量的结构化的数据存储；打开数据库和获取数据对象都是异步的； 需要开启事务，访问的objectStore都要是在开启的事务中。 数据库结构: db->transaction->objectStore->data Web SQL Database 实际上已经被废弃，而HTML5支持的本地存储实际上变成了 Web Storage （ Local Storage和Session Storage ）与 IndexedDB 。 Web Storage 使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心， IndexedDB 是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。 indexedDB最显著的特点: 异步API 在IndexedDB大部分操作( 如：打开数据库和获取数据 )并不是同步的，如： var request=window.indexedDB.open('testDB'); 这条指令并不会返回一个DB对象的句柄，我们得到的是一个IDBOpenDBRequest对象，而我们希望得到的DB对象在 IDBOpenDBRequest.result 属性中. indexedDB的常用操作 创建/打开数据库 function openDB (name) { var

在前一个阶段的工作中，项目组要开发一个平台，为了做出更好的用户体验，实现快速、高质量的交互，从而更快得到用户的反馈，要求在前端把数据存储起来，之后我去研究了下现在比较流行的前端存储数据库，找到了indexedDB，于是便对indexedDB做了一个较为深入的探索，此文就是记录探索过程的一些心得体会。 indexedDB为何物 在使用一个技术之前，先搞清楚它是什么，这对你的理解很重要，从DB就可以看出，它肯定是一个数据库，而说到数据库，有两种不同类型的数据库，就是关系型数据库和非关系型数据库，关系型数据库如Mysql、Oracle等将数据存储在表中，而非关系型数据库如Redis、MongoDB等将数据集作为个体对象存储。indexedDB就是一个非关系型数据库，它不需要你去写一些特定的sql语句来对数据库进行操作，因为它是nosql的，数据形式使用的是json， indexedDB出现的意义 也许熟悉前端存储的会说，不是有了LocalStorage和Cookies吗？为什么还要推出indexedDB呢？其实对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。 首先说说Cookies，英文直接翻译过来就是小甜点，听起来很好吃，实际上并不是