资讯专栏INFORMATION COLUMN

indexedDB入门

awesome23 / 3153人阅读

摘要:概述是一个事务型数据库系统,类似于基于的。然而不同的是它使用固定列表,是一个基于的面向对象的数据库。参考文档浏览器数据库入门教程

概述
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还是非常多的,这里只是简单介绍了最常用的几个操作(个人认为^_^)。

参考文档

IndexedDB_API

浏览器数据库 IndexedDB 入门教程

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101633.html

相关文章

  • 前端培训-初级阶段(17) - 数据存储(cookie、session、stroage)

    摘要:前端最基础的就是。这是初级阶段的最后一堂了。敏感数据要设置防止意外的被他人获取。是什么服务器端存放数据。都是用来做浏览器端存储的。解决的问题的存储大小问题。该使用索引来实现对该数据的高性能搜索。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,...

    lifefriend_007 评论0 收藏0
  • IndexedDB 打造靠谱 Web 离线数据库

    摘要:设置为参数设置指定索引,并确保唯一性上面主要做了件事打开数据库表新建,并设置设置打开数据库表主要就是版本号和名字,没有太多讲的,我们直接从创建开始吧。打开注意事项检查是否支持版本更新在生成一个实例时,需要手动指定一个版本号。 在知乎和我在平常工作中,常常会看到一个问题: 前端现在还火吗? 这个我只想说: 隔岸观火的人永远无法明白起火的原因,只有置身风暴,才能找到风眼之所在 ——『秦时明...

    孙吉亮 评论0 收藏0
  • IndexedDB使用与出坑指南

    摘要:在不指定的情况下,默认版本号为。具体示例如下在需要更新数据库的模式时,需要更新版本号。此时我们指定一个高于之前版本的版本号,就会触发事件。数据操作事务在中,我们也能够使用事务来进行数据库的操作。 概述 本文通过对IndexedDB的使用方法和使用场景进行相关介绍,对常见的问题进行解答。 同时,因为MDN中的相关文档缺乏相关逻辑性,所以不容易理解。本文将通过项目中常见的数据存储和操作需求...

    陈伟 评论0 收藏0
  • 深入了解浏览器存储--从cookie到WebStorage、IndexedDB

    摘要:优异的性能表现,有一部分原因要归功于浏览器存储技术的提升。是服务端生成,客户端进行维护和存储。当超过时,它将面临被裁切的命运。此外很多浏览器对一个站点的个数也是有限制的。存入读取数据保存的数据,以键值对的形式存在。 前言 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑WebApp——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功...

    XGBCCC 评论0 收藏0

发表评论

0条评论

awesome23

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<