初识浏览器数据库IndexedDB

定义

indexedDB是一种使用浏览器存储大量数据的方法.它创造的数据可以被查询,并且可以离线使用. IndexedDB对于那些需要存储大量数据,或者是需要离线使用的程序是非常有效的解决方法. indexedDB也遵从同源协议(same-origin policy). 所以你只能访问同域中存储的数据,而不能访问其他域的。

其简单而言, indexedDB就是一个基于事务操作的key-value型数前端数据库.其API大多是异步的 IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库。有了 LocalStorageCookies,为什么还要推出 indexedDB 呢?其实对于在浏览器里存储数据,可以使用 cookiesLocalStorage,但它们都是比较简单的技术,而 IndexedDB 提供了类似数据库风格的数据存储和使用方式。

与LocalStorage的场景和区别

  1. LocalStorage 是用 key-value 键值模式存储数据,它存储的数据都是字符串形式。如果你想让 LocalStorage存储对象,你需要借助 JSON.stringify()能将对象变成字符串形式,再用 JSON.parse()将字符串还原成对象,就是专门为小数量数据设计的,所以它的 api 设计为同步的。
  2. IndexedDB 很适合存储大量数据,它的 API 是异步调用的。IndexedDB 使用索引存储数据,各种数据库操作放在事务中执行。IndexedDB 甚至还支持简单的数据类型。
  3. IndexedDB 比 localstorage 强大得多,但它的 API 也相对复杂。对于简单的数据,你应该继续使用 localstorage,但当你希望存储大量数据时,IndexedDB 会明显的更适合,IndexedDB 能提供你更为复杂的查询数据的方式。

特性

  1. 键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。

  2. 异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。

  3. 支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。

  4. 同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

  5. 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。

  6. 支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

使用方式及案例

    // 数据库demo
    var testDB = window.indexedDB.open("testDB", 4);
    var db;
        testDB.onsuccess  = function(event){
            console.log("打开数据库");
            db = event.target.result;
            //创建表
            var objectStore = database.createObjectStore("students", { keyPath: rollNo });
            //创建事物
            var tran = db.transaction(["students"],"readwrite");
            //获取表
            var objectStore = tran.objectStore("students");
            //往表添加数据
            objectStore.add({rollNo: '1', name: 'mxp'});
            //根据主键获取数据
            var mxp = objectStore.get('1');
            //获取成功回调
            mxp.onsuccess = function(event){
                console.log("name : "+mxp.result.name);
            };
        }

zhaohao

大家好,欢迎来到赵豪博客!赵豪,94年生人,PHP程序员一枚,因为对PHP开发有着相对比较浓厚的兴趣,所以现在从事着PHP程序员的工作。 今天再次开通这个博客,这里将记录我的职业生涯的点点滴滴,感谢来访与关注!如果我的博客能给您带来一些帮助那真是一件非常荣幸的事情~

相关推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

初识浏览器数据库IndexedDB
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close