自己做外贸购物网站,成都人高清影院品牌加盟,网页休闲游戏网站,做ppt用什么软件前端本地存储数据库IndexedDB 1、前言2、什么是 indexedDB#xff1f;3、什么是 localForage#xff1f;4、localForage 的使用5、VUE 推荐使用 Pinia 管理 localForage 1、前言
前端本地化存储算是一个老生常谈的话题了#xff0c;我们对于 cookies、Web Storage#xff… 前端本地存储数据库IndexedDB 1、前言2、什么是 indexedDB3、什么是 localForage4、localForage 的使用5、VUE 推荐使用 Pinia 管理 localForage 1、前言
前端本地化存储算是一个老生常谈的话题了我们对于 cookies、Web StoragesessionStorage、localStorage的使用已经非常熟悉在面试与实际操作之中也会经常遇到相关的问题但这些本地化存储的方式还存在一些缺陷比较明显的缺点如下 存储量小即使是web storage的存储量最大也只有 5M存取不方便存入的内容会经过序列化当存入非字符串的时候取值的时候需要通过反序列化。 当我们的存储量比较大的时候我们一定会想到我们的 indexedDB让我们在浏览器中也可以使用数据库这种形式来玩转本地化存储然而 indexedDB 的使用是比较繁琐而复杂的有一定的学习成本但第三方库 localForage 的出现让我们轻松无负担的在浏览器中使用 indexedDB。 截止今天localForage 在 github 的 star 已经23.4k了可以说 localForage 和 indexedDB 算是相互成就了。
2、什么是 indexedDB
通俗地说IndexedDB 就是浏览器提供的本地数据库它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据提供查找接口还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言IndexedDB 不属于关系型数据库不支持 SQL 查询语句更接近 NoSQL 数据库。
IndexedDB 具有以下特点。
1键值对储存。 IndexedDB 内部采用对象仓库object store存放数据。所有类型的数据都可以直接存入包括 JavaScript 对象。对象仓库中数据以键值对的形式保存每一个数据记录都有对应的主键主键是独一无二的不能有重复否则会抛出一个错误。
2异步。 IndexedDB 操作时不会锁死浏览器用户依然可以进行其他操作这与 LocalStorage 形成对比后者的操作是同步的。异步设计是为了防止大量数据的读写拖慢网页的表现。
3支持事务。 IndexedDB 支持事务transaction这意味着一系列操作步骤之中只要有一步失败整个事务就都取消数据库回滚到事务发生之前的状态不存在只改写一部分数据的情况。
4同源限制。 IndexedDB 受到同源限制每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库而不能访问跨域的数据库。
5储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多一般来说不少于 250MB甚至没有上限。
6支持二进制储存。 IndexedDB 不仅可以储存字符串还可以储存二进制数据ArrayBuffer 对象和 Blob 对象。
3、什么是 localForage
localForage 是基于 indexedDB 封装的库通过它我们可以简化 IndexedDB 的使用。 但是你也不必太过担心因为 localforage 有一个降级策略若浏览器不支持 IndexedDB 则使用 WebSQL 如果不支持 WebSQL 则使用 localStorage。在所有主流浏览器中都可用ChromeFirefoxIE 和 Safari包括 Safari Mobile。
4、localForage 的使用
localForage
下载并引入
// 下载
npm i localforage
or
pnpm add localforage// 引入
import localforage from localforage创建一个 indexedDB
const myIndexedDB localforage.createInstance({name: myIndexedDB,
})存值
myIndexedDB.setItem(key, value)取值
由于indexedDB的存取都是异步的建议使用 promise.then() 或 async/await 去读值
myIndexedDB.getItem(somekey).then(function (value) {// we got our value
}).catch(function (err) {// we got an error
});or
try {const value await myIndexedDB.getItem(somekey);// This code runs once the value has been loaded// from the offline store.console.log(value);
} catch (err) {// This code runs if there were any errors.console.log(err);
}删除某项
myIndexedDB.removeItem(somekey)重置数据库
myIndexedDB.clear()5、VUE 推荐使用 Pinia 管理 localForage
如果你想使用多个数据库建议通过 pinia 统一管理所有的数据库这样数据的流向会更明晰数据库相关的操作都写在 store 中让你的数据库更规范化。
// store/indexedDB.ts
import { defineStore } from pinia
import localforage from localforageexport const useIndexedDBStore defineStore(indexedDB, {state: () ({filesDB: localforage.createInstance({name: filesDB,}),usersDB: localforage.createInstance({name: usersDB,}),responseDB: localforage.createInstance({name: responseDB,}),}),actions: {async setfilesDB(key: string, value: any) {this.filesDB.setItem(key, value)},}
})我们使用的时候就直接调用 store 中的方法
import { useIndexedDBStore } from /store/indexedDB
const indexedDBStore useIndexedDBStore()
const file1 {a: hello}
indexedDBStore.setfilesDB(file1, file1)
