OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

什么是IndexedDB:Web离线数据库入门简介及基础教程


分享到
分类 JS学习   关键字 前端   发布 kris  1416813449763
注意 转载须保留原文链接,译文链接,作者译者等信息。  

IndexedDB是什么


简单来说IndexedDB是HTML5引入的一种可以在Web浏览器使用的数据库,用来持久化大量数据。它可以让你的Web应用程序有非常强大的查询能力,并且可以离线工作。IndexedDB的数据操作直接使用JS脚本,不依赖SQL语句(最初的Web SQL数据库己被废弃),操作返回均采用异步。

下文来自: IndexedDB 规范

客户端需要存储大量局部对象,以便满足Web应用程序对离线数据的要求。 [WEBSTORAGE]可以用来储存键值对(key-value pair)。然而,它无法提供按顺序检索键,高性能地按值查询,或存储重复的一个键。

本规范提供了一些具体的API来实施高级键值数据库,这是最复杂的查询处理器的核心。它通过传统数据库来存储密钥和相应的值(每个键可以对应多个值),并提供通过确定的顺序对值进行遍历。通常用于插入或删除的大量数据,以及持久化有序数据结构。

数据库初始化和创建索引


当创建的library数据库之前并不存在时,会调用onupgradeneeded接口,在这个函数中可以进行数据库初始化和创建索引;

这里创建了一个名为"library"的数据库及一个名为"books"的数据仓库(ObjectStore相当于表),并填入了一些初始数据。


var db;
var request = indexedDB.open("library");

request.onupgradeneeded = function() {
  // 此数据库此前不存在,进行初始化
  var db = request.result;
  var store = db.createObjectStore("books", {keyPath: "isbn"});
  var titleIndex = store.createIndex("by_title", "title", {unique: true});
  var authorIndex = store.createIndex("by_author", "author");

  // 填入初始值
  store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
  store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
  store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});
};

request.onsuccess = function() {
  db = request.result;
};


数据存储及事务的使用


下面的例子使用事务(transaction)来填入数据:

var tx = db.transaction("books", "readwrite");
var store = tx.objectStore("books");

store.put({title: "Quarry Memories", author: "Fred", isbn: 123456});
store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});

tx.oncomplete = function() {
  // All requests have succeeded and the transaction has committed.
};


数据查询:索引


下面的例子使用索引来查询其中的一本书。

var tx = db.transaction("books", "readonly");
var store = tx.objectStore("books");
var index = store.index("by_title");

var request = index.get("Bedrock Nights");
request.onsuccess = function() {
  var matching = request.result;
  if (matching !== undefined) {
    // A match was found.
    console.log(matching.isbn, matching.title, matching.author);
  } else {
    // No match was found.
    console.log(null);
  }
};


数据查询:索引与游标(cursor)


下面的例子通过索引和游标来来枚举查询到的所有匹配的书

var tx = db.transaction("books", "readonly");
var store = tx.objectStore("books");
var index = store.index("by_author");

var request = index.openCursor(IDBKeyRange.only("Fred"));
request.onsuccess = function() {
  var cursor = request.result;
  if (cursor) {
    // Called for each matching record.
    console.log(cursor.value.isbn, cursor.value.title, cursor.value.author);
    cursor.continue();
  } else {
    // No more matching records.
    console.log(null);
  }
};


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NodeJS会是昙花一现吗?
  2. Nginx的大计划:将原生支持JavaScript
  3. NodeJS就是癌症[2011]
  4. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  5. Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的
  6. Go语言实例教程基础语法篇(一)
  7. 理解JavaScript中的事件路由冒泡过程及委托代理机制
  8. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  9. 基于HTML5和JavaScript实现的Winamp MP3播放器
  10. 一些你不知道的JavaScript Console调试命令
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  2. Node.JS编码规范指南教程:教你优雅地写JavaScript代码
  3. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  4. Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的
  5. 理解JavaScript中的事件路由冒泡过程及委托代理机制
  6. 用JavaScript制作HTML5动画基础
  7. Node.js 包教不包会
  8. 使用Javascript开发OS X应用程序
  9. Node程序中的设计模式
  10. 制作canvas游戏

 关键字 - 前端
  1. 用纯css改变下拉列表select框的默认样式
  2. AngularJS在大型单页面应用中的性能优化(一)
  3. 我们抛弃了AngularJS:单页面应用的5大缺陷
  4. 5个经典的前端面试问题
  5. 我被问得最多的十个JavaScript前端面试问题
  6. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  7. 超简易——Bootstrap可关闭tab标签页
  8. 什么是Viewport Meta(width详解)及在手机上的应用
  9. Animate.css让添加CSS动画像喝水一样容易
  10. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号