您现在的位置是：网站首页> 编程资料编程资料

深入解析HTML5的IndexedDB索引数据库html5中localStorage本地存储的简单使用HTML5 LocalStorage 本地存储刷新值还在详解HTML5 LocalStorage 本地存储 html5本地存储 localStorage操作使用详解Html5 web本地存储实例详解HTML5本地存储之Web Storage详解HTML5中indexedDB 数据库的使用实例html5 初试 indexedDB(推荐)HTML5本地存储之IndexedDB

2021-08-31 1161人已围观

简介 这篇文章主要介绍了深入解析HTML5中的IndexedDB索引数据库,包括事务锁等基本功能的相关使用示例,需要的朋友可以参考下

介绍
IndexedDB是HTML5 WEB数据库，允许HTML5 WEB应用在用户浏览器端存储数据。对于应用来说IndexedDB非常强大、有用，可以在客户端的chrome,IE,Firefox等WEB浏览器中存储大量数据，下面简单介绍一下IndexedDB的基本概念。
 
什么是IndexedDB
IndexedDB，HTML5新的数据存储，可以在客户端存储、操作数据，可以使应用加载地更快，更好地响应。它不同于关系型数据库，拥有数据表、记录。它影响着我们设计和创建应用程序的方式。IndexedDB 创建有数据类型和简单的JavaScript持久对象的object，每个object可以有索引，使其有效地查询和遍历整个集合。本文为您提供了如何在Web应用程序中使用IndexedDB的真实例子。
 
开始
我们需要在执行前包含下面前置代码

JavaScript Code复制内容到剪贴板
  1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
  2.     
  3. //prefixes of window.IDB objects   
  4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
  5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
  6.     
  7. if (!indexedDB) {   
  8. alert("Your browser doesn't support a stable version of IndexedDB.")   
  9. }  

 
打开IndexedDB
在创建数据库之前，我们首先需要为数据库创建数据，假设我们有如下的用户信息：

JavaScript Code复制内容到剪贴板
  1. var userData = [   
  2. { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },   
  3. { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }   
  4. ];  

现在我们需要用open()方法打开我们的数据库:

JavaScript Code复制内容到剪贴板
  1. var db;   
  2. var request = indexedDB.open("databaseName", 1);   
  3.     
  4. request.onerror = function(e) {   
  5. console.log("error: ", e);   
  6. };   
  7.     
  8. request.onsuccess = function(e) {   
  9. db = request.result;   
  10. console.log("success: "+ db);   
  11. };   
  12. request.onupgradeneeded = function(e) {   
  13.     
  14. }  

如上所示，我们已经打开了名为"databaseName"，指定版本号的数据库，open()方法有两个参数：
1.第一个参数是数据库名称，它会检测名称为"databaseName"的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。
2.第二个参数是数据库的版本，用于用户更新数据库结构。
 
onSuccess处理
发生成功事件时“onSuccess”被触发，如果所有成功的请求都在此处理，我们可以通过赋值给db变量保存请求的结果供以后使用。
 
onerror的处理程序
发生错误事件时“onerror”被触发，如果打开数据库的过程中失败。
 
Onupgradeneeded处理程序
如果你想更新数据库（创建，删除或修改数据库），那么你必须实现onupgradeneeded处理程序，使您可以在数据库中做任何更改。 在“onupgradeneeded”处理程序中是可以改变数据库的结构的唯一地方。
 
创建和添加数据到表：
IndexedDB使用对象存储来存储数据，而不是通过表。 每当一个值存储在对象存储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码显示了如何创建对象存储并插入预先准备好的数据：

JavaScript Code复制内容到剪贴板
  1. request.onupgradeneeded = function(event) {   
  2. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
  3. for (var i in userData) {   
  4. objectStore.add(userData[i]);    
  5. }   
  6. }  

我们使用createObjectStore（）方法创建一个对象存储。 此方法接受两个参数： - 存储的名称和参数对象。 在这里，我们有一个名为"users"的对象存储，并定义了keyPath，这是对象唯一性的属性。 在这里，我们使用“id”作为keyPath，这个值在对象存储中是唯一的，我们必须确保该“ID”的属性在对象存储中的每个对象中存在。 一旦创建了对象存储，我们可以开始使用for循环添加数据进去。
 
手动将数据添加到表：
我们可以手动添加额外的数据到数据库中。

JavaScript Code复制内容到剪贴板
  1. function Add() {   
  2. var request = db.transaction(["users"], "readwrite").objectStore("users")   
  3. .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });   
  4.     
  5. request.onsuccess = function(e) {   
  6. alert("Gautam has been added to the database.");   
  7. };   
  8.     
  9. request.onerror = function(e) {   
  10. alert("Unable to add the information.");    
  11. }   
  12.     
  13. }  

之前我们在数据库中做任何的CRUD操作（读，写，修改），必须使用事务。 该transaction()方法是用来指定我们想要进行事务处理的对象存储。 transaction()方法接受3个参数（第二个和第三个是可选的）。 第一个是我们要处理的对象存储的列表，第二个指定我们是否要只读/读写，第三个是版本变化。
 
从表中读取数据
get()方法用于从对象存储中检索数据。 我们之前已经设置对象的id作为的keyPath，所以get()方法将查找具有相同id值的对象。 下面的代码将返回我们命名为“Bidulata”的对象：

JavaScript Code复制内容到剪贴板
  1. function Read() {   
  2. var objectStore = db.transaction(["users"]).objectStore("users");   
  3. var request = objectStore.get("2");   
  4. request.onerror = function(event) {   
  5. alert("Unable to retrieve data from database!");   
  6. };   
  7. request.onsuccess = function(event) {    
  8. if(request.result) {   
  9. alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);   
  10. } else {   
  11. alert("Bidulata couldn't be found in your database!");    
  12. }   
  13. };   
  14. }  

 
从表中读取所有数据
下面的方法检索表中的所有数据。 这里我们使用游标来检索对象存储中的所有数据：

JavaScript Code复制内容到剪贴板
  1. function ReadAll() {   
  2. var objectStore = db.transaction("users").objectStore("users");    
  3. var req = objectStore.openCursor();   
  4. req.onsuccess = function(event) {   
  5. db.close();   
  6. var res = event.target.result;   
  7. if (res) {   
  8. alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);   
  9. res.continue();   
  10. }   
  11. };   
  12. req.onerror = function (e) {   
  13. console.log("Error Getting: ", e);   
  14. };    
  15. }  

该openCursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条记录。
删除表中的记录
下面的方法从对象中删除记录。

JavaScript Code复制内容到剪贴板
  1. function Remove() {    
  2. var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
  3. request.onsuccess = function(event) {   
  4. alert("Tapas's entry has been removed from your database.");   
  5. };   
  6. }  

我们要将对象的keyPath作为参数传递给delete()方法。
 
最终代码
下面的方法从对象源中删除一条记录：

JavaScript Code复制内容到剪贴板
  1. >  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>IndexedDBtitle>  
  5. <script type="text/javascript">  
  6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
  7.     
  8. //prefixes of window.IDB objects   
  9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
  10. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
  11.     
  12. if (!index

    上一篇：使用HTML5的表单验证的简单示例html5自带表单验证体验优化及提示气泡修改功能HTML5 表单验证失败的提示语问题使用HTML5和CSS3表单验证功能HTML5实现表单自动验证功能实例代码详解HTML5中表单验证的8种方法介绍HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法HTML5表单验证特性(知识点小结)

    下一篇：利用HTML5实现使用按钮控制背景音乐开关有关HTML5中背景音乐的自动播放功能HTML5简单实现添加背景音乐的几种方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网