IndexedDB 的简单使用

最新推荐文章于 2024-10-24 10:41:42 发布

Yjiokm

最新推荐文章于 2024-10-24 10:41:42 发布

阅读量290

点赞数

分类专栏： web前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_34581491/article/details/119251547

版权

本文介绍了IndexedDB的基本概念，并通过两个实例展示了如何在JavaScript中使用IndexedDB进行前端本地存储，包括存储和读取含环对象以及学生信息。参考了阮一峰的网络日志和MDN的API接口指南。

摘要由CSDN通过智能技术生成

参考

第一个例子

session-db.js
实现 miscStorage（仿 sessionStorage）

无需序列化反序列化
能存储含环对象
深拷贝

const sessionDB = {
   
    db: null,
    dbname: 'sessionDB',
    load() {
   
        return new Promise((resolve, reject) => {
   
            let sessionDBLoaded = sessionStorage.getItem('sessionDBLoaded');
            if (!sessionDBLoaded) {
   
                let request = indexedDB.deleteDatabase(this.dbname);
                request.onerror = event => {
   
                    console.error(event);
                    return reject(event);
                };
                request.onsuccess = event => {
   
                    console.log('清除了原 sessionDB');
                };
            }
    
            let openRequest = indexedDB.open(this.dbname, 1);
            openRequest.onerror = (event) => {
   
                return reject(event);
            };
            
            // db 创建或版本变更时的事件处理，十分重要。
            // 原本没有库，或者 version 更改后会触发 onupgradeneeded
            // onupgradeneeded 中写的是表结构的改变，类似于关系型数据库的 DDL
            // IDBDatabase.deleteObjectStore 与 IDBDatabase.createObjectStore 一样，此方法只能在 onupgradeneeded 中调用
            openRequest.onupgradeneeded = (event) => {
   
                this.db = event.target.result;
                if (!this.db.objectStoreNames.contains('misc')) {
   
                    objectStore = this.db.createObjectStore("misc", {
    keyPath: "key" });
                    objectStore.createIndex("key", "key", {
    unique: true });
                }
                console.log('更新了 sessionDB');
            };
            openRequest.onsuccess = (event) => {
   
                this.db = event.target.result;
                if (sessionDBLoaded) {
   
                    console.log('加载了原 sessionDB');
                }
                sessionStorage.setItem('sessionDBLoaded', true);
                return resolve(this.db);
            };
        });
    },
    destroy() {
   
        return new Promise((resolve, reject) => {
   
            if (!this.db) {
   
                console.log('db is null');
                return resolve();
            }
            this.db.close();
            let request = indexedDB.deleteDatabase(this.dbname);
            request.onerror = event => {
   
                console.error(event);
                return reject(event);
            };
            request.onsuccess = event => {
   
                sessionStorage.removeItem('sessionDBLoaded');
                console.log('销毁了 sessionDB');
                return resolve();
            };
        });
    }
}
sessionDB.load();


const miscStorage = {
   
    getObjectSotrage() {
   
        return sessionDB.db.transaction(["misc"], "readwrite").objectStore("misc");
    }