window.indexDB & window.localForage的使用

什么是LocalForage?

LocalForage是一个简单易用的JS库。它提供了一种跨浏览器的方式来进行本地数据存储。是基于IndexDB,WebSQL和localStorage 等浏览器本地存储API的封装库，通过类似localStorage API的异步存储来改进Web应用程序的离线体验。

优势

1. 异步存储可以处理大量存储业务，不会阻塞主要进程。
2. 可存储多种数据类型，对比localStorage,cookies,seesion 来看存储类型不只字符串，LocalForage可以直接存储和检索JavaScript对象、数组等复杂数据类型。
3. 跨浏览器支持，主流浏览器中Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）都可使用，但不兼容的浏览LocalForage有优雅的降级兼容策略若浏览器不支持indexDB或WebSQL则使用localStorage
4. 存储容量，在不降级使用localStorage 的情况下可以处理大量数据。
5. 数据共享：localStorage的数据仅限于当前域名下页面。而LocalForage 可以通过配置共享数据，使不同域名页面可以访问和共享存储数据。

LocalForage 使用

1. 引入localForage

1.1npm安装

npm install localforage

引入

import localforage from 'localforage';

1.2直接引入

<script src="https://cdn.jsdelivr.net/npm/localforage@latest/dist/localforage.js"></script>

2. 初始化配置 以下过程以vue中项目为例

localforage.config({
   // driver: localforage.INDEXEDDB,  选择存储引擎，如IndexedDB  不写则自动按IndexedDB>>WebSQL>>localStorage降序
     driver: [localforage.WEBSQL,
             localforage.INDEXEDDB,
             localforage.LOCALSTORAGE],
    name: 'my-app', // 数据库名称
    version: 1, // 数据库版本号 用于升级
    storeName: 'my-store', // 存储对象的名称
    size:'10000' //数据库大小（以字节为单位）只用于设置webSQL.默认值4980736
});

挂载localforage 到vue全局

Vue.prototype.$localforage = localforage 初始化配置后可在浏览器存储看见数据库已新建

1. 存入数据

setItem （key,value,callback) 可传入一个成功回调

this.$localforage.setItem('data', 222222222222222, () => {
            console.log('set 成功 执行其他逻辑')
        })

2. 获取数据

由于indexedDB的存取都是异步的，存取数据可以使用 promise.then() 或 async/await 去读值

eg:

async getVal(key) {
            let value = await this.$localforage.getItem(key)
            console.log(value, 'finish get dosomething')
        }
        
       或者
    async getVal(key) {
         this.$localforage.getItem(key).then(function (value) {
console.log(value, 'finish get dosomething')
}).catch(function (err) {
  // we got an error
});
        }

3. 删除数据

removeKey(key) {
           this.$localforage.removeItem(key).then(() => {
    console.log('Data removed successfully');
  })
  .catch((error) => {
    console.error('Error removing data:', error);
  });

        },

4.清空数据库

clearStore() {
           this.$localforage
                .clear()
                .then(() => {
                    console.log('All data cleared')
                })
                .catch((error) => {
                    console.error('Error clearing data:', error)
                })
        }

什么是IndexDB？

indexDB 是一个运行在浏览器的非关系型数据库

特点

1. 键值对存储：indexDB内部采用对象仓库存放数据。所有类型的数据可以直接存入，在仓库里数据以键值对的形式进行保存，每个数据记录丢有对应的主键且主键独一无二。
2. indexDB操作是异步操作，不会因同步任务较多锁死浏览器；用户操作indexDB时可进行其他操作，避免了大量读写操作时影响网页性能。
3. 支持事务 ：indexDB支持在数据库操作失败后，事务取消数据库可回滚到之前的状态
4. 同源限制 indexDB受同源限制，每个数据库对应创建它的域名。网页只能访问自身域名下的数据库不能跨域访问。
5. 支持二进制存储:indexDB不仅可以存储字符串也可以存储二进制树
6. 存储空间大，indexDB为数据库，大小不小于250M.

使用（以在vue组件中使用为例）

1. 初始化

data() {
        return {
            db: null,
        }
    },

initDB() {
            let that = this
            // 创建数据库 名称
            var request = window.indexedDB.open('databaseName')
            request.onerror = function (event) {
                // 错误处理
                console.log(' 打开数据库报错')
            }
            request.onsuccess = function (event) {
                // 成功处理
                that.db = event.target.result
                console.log('打开数据库成功')
            }
            // 更新监听    默认在初始化的时候调用  表已存在则更新，不存在则新建表格
            request.onupgradeneeded = function (event) {
                that.db = event.target.result
                var objectStore = null
                
                if (!that.db.objectStoreNames.contains('tableName')) {
                    objectStore = that.db.createObjectStore('tableName', { keyPath: 'id' })
                    // 创建索引 可以让你搜索任意字段  别名 》》属性名
                    objectStore.createIndex('name111', 'name', { unique: false })
        },

indexDB各方法为异步方法，可执行其他回调事件

2. 存入数据

add (data, tableName) => {
    const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data);
    return new Promise((resolve, reject) => {
        request.onsuccess = function (event) {
            console.log('数据写入成功');
            resolve(event);
        };
        request.onerror = function (event) {
            console.log('数据写入失败');
            reject(event);
        }
    })
}

3. 查询数据

  // 查
        read(tableName, keyName) {
            // 取到数据表
            var objectStore = this.db.transaction([tableName]).transaction.objectStore(tableName)
            // 用户读取数据，参数是主键
            var request = objectStore.get(keyName)
             return new Promise((resolve, reject) => {
            request.onerror = function (event) {
                reject(event);
            }
            request.onsuccess = function (event) {
             resolve(request.result);
                
            }
             })
        },

4. 数据更新

const update = (data, tableName ) => {
    const request = db.transaction([tableName], 'readwrite')
        .objectStore(tableName)
        .put(data);

    return new Promise((resolve, reject) => {
        request.onsuccess = function (event) {
            console.log('数据更新成功');
            resolve(event);
        };
        request.onerror = function (event) {
            console.log('数据更新失败');
            reject(event);
        }
    })
}

5. 数据删除

const remove = (keyName , tableName ) => {
    const request = db.transaction([tableName], 'readwrite')
        .objectStore(tableName)
        .delete(keyName);

    return new Promise((resolve, reject) => {
        request.onsuccess = function (event) {
            console.log('数据删除成功');
            resolve(true);
        };
        request.onerror = function (event) {
            console.log('数据删除失败');
            reject(event)
        };

    })

}

6. 查询数据使用索引

 // 使用索引索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键（即从主键取值）。假定新建表格的时候，对name字段建立了索引。
        // 用索引的别名当参数
        // 查询到第一个后返回
        getDataByIndex(tableName, aliasName, parmaVal) {
            var store = this.db.transaction([tableName], 'readwrite').objectStore(tableName)
            // 以某个值为索引 并创建查询事务
            var index = store.index(aliasName)
            var request = index.get(parmaVal)
               return new Promise((resolve, reject) => {
        request.onsuccess = function (event) {
         var result = event.target.result
            resolve(result);
        };
        request.onerror = function (event) {
            reject(event)
        };

    })

        },