Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > HTML5 本地存储 IndexedDB 教程

    HTML5 本地存储 IndexedDB 教程

    HTML5 herman 2860浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    HTML5 的一个重要特性是本地数据持久性，它使用户能够在线和离线访问 Web 应用程序。此外，本地数据持久性使移动应用程序更灵敏，使用的带宽更少，而且能够在低带宽场景中更高效地工作。HTML5 提供了一些本地数据持久性选项。第一个选项是 localstorage，它支持您使用一个简单的键值对来存储数据。IndexedDB（一个更加强大的选项）支持您本地存储大量对象，并使用健壮的数据访问机制检索数据。

    IndexedDB API 取代了 Web Storage API，后者在 HTML5 规范中已不推荐使用。（但一些领先的浏览器仍然支持 Web Storage，其中包括苹果公司的 Safari 和 Opera Web 浏览器）与 Web Storage 相比，IndexedDB 具有多个优势，其中包括索引、事务处理和健壮的查询功能。本文将通过一系列的示例来展示如何管理 IndexedDB 数据库。

    IndexedDB

    对于只存储某些字段的需求来说，可以使用Local Storage和 Session Storage来完成。但是一旦存储大量的数据，Local Storage和 Session Storage就远远不能满足需求了。这时，IndexedDB的强大之处就会体现出来了。

    创建或连接数据库

    IndexedDB(name, version, callbackObject = {});
    • name : 创建或者连接的数据库名
    • version : 数据库版本号
    • callbackObject: 配置回调函数

    callbackObject 支持以下的回调函数配置：

    • success：创建或者连接的数据库成功后的回调函数
    • error：创建或者连接的数据库失败后的回调函数
    • upgradeneeded：数据库版本号更新后的回调函数 
    /* 对不同浏览器的indexedDB进行兼容 */
const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
/* 创建或连接数据库 */
const request = indexeddb.open(name, version);  // name：数据库名，version：数据库版本号

    IndexedDB(name, version, {
    success: function(et){
        const db = this.db; // 数据库实例
    }
});

    连接到数据库的回调函数

    request.addEventListener('success', function(event){ 
    // 打开或创建数据库成功
}, false);

request.addEventListener('error', function(event){ 
    // 打开或创建数据库失败
}, false);

request.addEventListener('upgradeneeded', function(event){ 
    // 更新数据库时执行
}, false);

    在连接到数据库后，request会监听三种状态：

    • success：打开或创建数据库成功
    • error：打开或创建数据库失败
    • upgradeneeded：更新数据库
      upgradeneeded状态是在indexedDB创建新的数据库时和indexeddb.open(name, version) version（数据库版本号）发生变化时才能监听到此状态。当版本号不发生变化时，不会触发此状态。数据库的ObjectStore的创建、删除等都是在这个监听事件下执行的。

    创建、删除ObjectStore

    在indexedDB中，ObjectStore类似于数据库的表。 

    request.addEventListener('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;

    // 关闭数据库
    db.close();
    
    // 判断是否有ObjectStore
    db.objectStoreNames.contains(objectStoreName);
    
    // 删除ObjectStore
    db.deleteObjectStore(objectStoreName);
    
}, false);

    可以用如下方法创建一个ObjectStore 

    request.addEventListener('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 判断是否有ObjectStore
    if(!db.objectStoreNames.contains(objectStoreName)){
        const store = db.createObjectStore(objectStoreName, {
            keyPath: keyPath  // keyPath 作为ObjectStore的搜索关键字
        });
        // 为ObjectStore创造索引
        store.createIndex(name,    // 索引
                          index,   // 键值
                          {
                              unique: unique  // 索引是否唯一
                          });
    }
}, false);

    数据的增删改查

    request.addEventListener('success', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    
    // 查找一个ObjectStore
    db.transaction(objectStoreName, wa);
    // wa为'readwrite'时，数据可以读写 
    // wa为'readonly'时，数据只读
    const store = transaction.objectStore(objectStoreName);
}, false);

    数据库的增删改查： 

    // 添加数据，当关键字存在时数据不会添加
store.add(obj);
// 更新数据，当关键字存在时覆盖数据，不存在时会添加数据
store.put(obj);
// 删除数据，删除指定的关键字对应的数据
store.delete(value);
// 清除ObjectStore
store.clear();
// 查找数据，根据关键字查找指定的数据
const g = store.get(value);
g.addEventListener('success', function(event){
    // 异步查找后的回调函数
}, false);

    按索引查找数据

    const index = store.index(indexName);
const cursor = index.openCursor(range);
cursor.addEventListener('success', function(event){
    const result = event.target.result;
    if(result){
        result.value       // 数据
        result.continue(); // 迭代，游标下移
    }
}, false);

    按索引的范围查找数据

    const index = store.index(indexName);
const cursor = index.openCursor(range);
/**
 * range为null时，查找所有数据
 * range为指定值时，查找索引满足该条件的对应的数据
 * range为IDBKeyRange对象时，根据条件查找满足条件的指定范围的数据
 */

// 大于或大于等于 
range = IDBKeyRange.lowerBound(value, true)   // (value, +∞)，>  value
range = IDBKeyRange.lowerBound(value, false)  // [value, +∞)，>= value
// 小于或小于等于，isOpen：true，开区间；false，闭区间
range = IDBKeyRange.upperBound(value, isOpen)
// 大于或大于等于value1，小于或小于等于value2
IDBKeyRange.bound(value1, value2, isOpen1, isOpen2)

    删除数据库

    IndexedDB.deleteDatabase(databaseName);

    关闭数据库

    this.close(time);

    判断是否有ObjectStore

    this.hasObjectStore(objectStoreName);

    创建ObjectStore

    this.createObjectStore(objectStoreName, keyPath, indexArray);

    indexArray(Array)，里面的对象为(Object)

    • index: 索引
    • name: 键值

    删除ObjectStore

    this.deleteObjectStore(objectStoreName);

    获取ObjectStore

    this.getObjectStore(objectStoreName, writeAble = true);

    举例如下： 

    IndexedDB(name, version, {
    success: function(){
        const db = this.db;                                 // 数据库实例
        const store = this.getObjectStore(objectStoreName); // ObjectStore实例
    }
});

    添加数据

    store.add(obj);

    Object或Array，下同。

    修改数据

    store.put(obj);

    删除数据

    store.delete(value);

    String、Number或Array。

    查找数据

    store.get(key, callback);

    callback回调函数。回调参数为result。

    清除ObjectStore

    store.clear();

    游标

    store.cursor(indexName, [range,] callback);

    range用来选择范围。
    根据字符串返回游标查询的范围，例如：

    • '5' 等于
    • '> 5' 大于
    • '>= 5' 大于等于
    • '< 5' 小于
    • '<= 5' 小于等于
    • '[5, 8]' 闭区间
    • '(5, 8)' 开区间

    callback回调函数。回调参数为result，result.value为获取的数据，result.continue()迭代。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » HTML5 本地存储 IndexedDB 教程

    相关文章推荐