indexedDB入门

2019-02-13 admin

概述

IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象的数据库。

现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过 4KB,且每次请求都会发送回服务器 LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景

简单来说,IndexedDB 就是浏览器提供的本地数据库。

IndexedDB 具有以下特点

  • 键值对储存
  • 异步操作(避免锁死浏览器)
  • 支持事务
  • 同源限制(协议+域名+端口)
  • 存储空间大
  • 支持二进制存储(ArrayBuffer 对象和 Blob 对象,可存储文件数据)

基本概念

对比关系数据库 MySql 可以得到以下关系

  • 数据库:IDBDatabase
  • 表格:对象仓库(IDBObjectStore)
  • 行数据:对象仓库存储的一条数据
  • 索引:IDBindex,加速数据的检索(在对象仓库里面可为不同的键创建)
  • 事务:IDBTransaction
  • 操作请求:IDBRequest
  • IDBCursor:遍历对象存储空间和索引
  • IDBKeyRange:定义键的范围数据

基本操作

兼容性注意点

// 全局变量兼容性问题

window.indexedDB =
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB ||
    window.msIndexedDB;

window.IDBTransaction =
    window.IDBTransaction ||
    window.webkitIDBTransaction ||
    window.msIDBTransaction;

window.IDBKeyRange =
    window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

if (!window.indexedDB) {
    window.alert(
        "Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available."
    );
}

数据库操作

打开/新建数据库

var databaseName = "MyTestDatabase";
var databaseVersion = 1;

// 打开数据库
var request = window.indexedDB.open(databaseName, databaseVersion);

request.onsuccess = function(event) {
    console.log("open success");
};

request.onerror = function(event) {
    console.log("open fail");
};

request.onupgradeneeded = function(event) {};

window.indexedDB.open函数打开对应的数据库,如果没有该数据库就会新建。

新建数据库或者数据库版本大于当前版本会触发onupgradeneeded事件

数据库为什么会有版本? 因为数据库的数据解构可能会发生改变的,所以一般修改数据解构的操作在onupgradeneeded里面书写

删除数据库

window.indexedDB.deleteDatabase(databaseName);

对象仓库操作(表格操作)

创建和修改表格是修改数据库的数据解构,所以我把他们写在onupgradeneeded事件里

创建表格

request.onupgradeneeded = function(event) {
    console.log("onupgradeneeded");
    db = event.target.result;

    // 创建仓库对象(创建表格)
    // 这里我将主键设置为id
    var objectStore = db.createObjectStore(objectStoreName, {
        keyPath: "id",
        autoIncrement: true
    });
};

删除表格

request.onupgradeneeded = function(event) {
    console.log("onupgradeneeded");
    db = event.target.result;

    // 删除仓库对象(删除表格)
    db.deleteObjectStore(objectStoreName);
};

数据操作(行数据操作)

新增数据(增)

var databaseName = "MyTestDatabase";
var databaseVersion = 1;
var db;
var objectStoreName = "objectStore1";
var storeDatas = [
    { id: "1", name: "张三", age: 18 },
    { id: "2", name: "李四", age: 19 }
];

var request = window.indexedDB.open(databaseName, databaseVersion);

request.onsuccess = function(event) {
    console.log("open success");
    db = event.target.result;

    // 将数据保存到新建的对象仓库
    var objectStore = db
        .transaction([objectStoreName], "readwrite")
        .objectStore(objectStoreName);

    storeDatas.forEach(function(dataItem) {
        // 添加一条数据
        objectStore.add(dataItem);
    });
};

删除数据(删)

var databaseName = "MyTestDatabase";
var databaseVersion = 1;
var db;
var objectStoreName = "objectStore1";
var storeDatas = [
    { id: "1", name: "张三", age: 18 },
    { id: "2", name: "李四", age: 19 }
];

var request = window.indexedDB.open(databaseName, databaseVersion);

request.onsuccess = function(event) {
    console.log("open success");
    db = event.target.result;

    console.log("删除数据");
    var req = db
        .transaction([objectStoreName], "readwrite")
        .objectStore(objectStoreName)
        .delete("2"); // 这里的“2”指定的是主键的键值

    req.onsuccess = function() {
        console.log("删除成功");
    };

    req.onerror = function() {
        console.log("删除失败");
    };
};

修改数据(改)

console.log("更新数据");
var req = db
    .transaction([objectStoreName], "readwrite")
    .objectStore(objectStoreName)
    .put({
        id: "2",
        name: "王五",
        age: 17
    }); // 将整条数据给替换

req.onsuccess = function() {
    console.log("更新成功");
};

req.onerror = function() {
    console.log("更新失败");
};

获取数据(查)

console.log("读取数据");
var req = db
    .transaction([objectStoreName], "readonly")
    .objectStore(objectStoreName)
    .get("1"); // 这里的“1”也是主键的键值

req.onsuccess = function() {
    console.log("获取成功");
    console.log(req.result);
};

req.onerror = function() {
    console.log("获取失败");
};

通过指针对象遍历表格数据

console.log("遍历数据");
var objectStore = db
    .transaction([objectStoreName], "readonly")
    .objectStore(objectStoreName);

var count = 0;
objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
        console.log(`第${++count}条数据为`);
        console.log(cursor.value);
        cursor.continue(); // 将指针移动下一个位置
    } else {
        console.log("没有更多数据");
    }
};

小结

indexedDB的API还是非常多的,这里只是简单介绍了最常用的几个操作(个人认为^_^)。

参考文档

[转载]原文链接:https://segmentfault.com/a/1190000018141305

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53682.html

文章标题:indexedDB入门

相关文章
JavaScript的RequireJS库入门指南
简介 如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目,都用到了RequireJS,或者是我向它们推荐了增加RequireJS。在这篇文章中,我将描述RequireJS是什么,以及它的一些基础场景。 异步模块...
2017-03-27
Nodejs学习笔记之入门篇
分享第一篇,关于 NodeJS —— Javascript 的常用知识以及如何从 Javascript 开发者过渡到 NodeJS 开发者(不会介绍具体的框架)。在读本文前,希望你对 javascript 有一些初步的认识。 Javascr...
2017-03-22
EsLint入门学习教程
介绍 ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可扩...
2017-03-16
webpack入门必知必会
前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出。 首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件...
2017-03-07
Move.js入门
在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是,很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己,对你来说,或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单...
2017-03-20
前端构建 Less入门(CSS预处理器)
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助...
2017-03-13
vue-router 学习快速入门
vue-router 快速入门 配置路由 $ npm install vue-router --save routes.js import Home from './pages/Home.vue' ...
2017-03-14
less简单入门(CSS 预处理语言)
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助...
2017-03-13
node.js入门学习之url模块
前言 今天主要记录的是关于node.js里面的一个简单的模块,url模块。这个url的模块要使用的话需要先引入。若只是在命令行里比如cmd或git bash 等使用url这个模块的话,是不需要require进来的。直接使用便可。 引入模块 ...
2017-03-15
JavaScript入门基础
JavaScript基本语法 1、运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,=,/=,%=,<<=,>>=,|=,&=)、算术运算符(+,-,,/,++,–,%)、比较运...
2017-03-29
回到顶部