简介
IndexedDB 是现代化 Web 应用程序中常用的客户端数据库. 但是，一些旧版本的浏览器并不支持 IndexedDB，而且不同浏览器之间的支持和实现都不尽相同。因此，必须使用 polyfill 来填充对 IndexedDB 的不兼容性。
其中，indexeddbshim 是一个 npm 包，它是兼容 IndexedDB 规范的 JavaScript 库，具有与真正的 IndexedDB API 相同的接口，可以使在所有现代浏览器中使用 IndexedDB 成为可能。
本文将介绍如何在你的前端项目中使用 indexeddbshim，包括安装、初始化和基本使用方法。
安装
indexeddbshim 可以使用 npm 安装：
npm install indexeddbshim --save
注意：此处我们假定你已经按照官方文档正确安装并配置好了 npm 环境。
初始化
indexeddbshim 必须在页面加载之前先初始化，让它能够替代原生的 IndexedDB API：
import shims from "indexeddbshim";
// 初始化 indexeddbshim
const indexedDB = shims({
checkOrigin: false
});这样，我们可以像使用原生 IndexedDB API 一样调用 indexedDB 对象中的方法。
基本使用
indexeddbshim API 与 IndexedDB API 相同，因此使用方法基本相同。
下面是一些 indexeddbshim 的基本使用示例：
打开数据库
-- -------------------- ---- ------- ----- ------- - ---------------------- --- --------------- - -------- ------- - -------------------------- -- ----------------- - -------- ------- - ----- -- - -------------------- ----------------------- ---- --
新建一个对象存储
const request = indexedDB.open("myDB", 1);
request.onupgradeneeded = function (event) {
const db = event.target.result;
const store = db.createObjectStore("customers", { keyPath: "id" });
console.log("新建成功！", store);
};添加数据
-- -------------------- ---- -------
----- ------- - ---------------------- ---
----------------- - -------- ------- -
----- -- - --------------------
----- ----------- - ----------------------------- -------------
----- ----- - -------------------------------------
----- -------- - -
--- --
----- -------
------ -----------------
--
----- ---------- - --------------------
------------------ - -------- ------- -
-------------------------
--
-------------------- - -------- ------- -
---------------------- ---------------------
--
--获取数据
-- -------------------- ---- -------
----- ------- - ---------------------- ---
----------------- - -------- ------- -
----- -- - --------------------
----- ----------- - ----------------------------- -------------
----- ----- - -------------------------------------
----- ---------- - -------------
------------------ - -------- ------- -
-------------------------
--
-------------------- - -------- ------- -
---------------------- ---------------------
--
--修改数据
-- -------------------- ---- -------
----- ------- - ---------------------- ---
----------------- - -------- ------- -
----- -- - --------------------
----- ----------- - ----------------------------- -------------
----- ----- - -------------------------------------
----- -------- - -
--- --
----- -------
------ ------------------
--
----- ---------- - --------------------
------------------ - -------- ------- -
-------------------------
--
-------------------- - -------- ------- -
---------------------- ---------------------
--
--删除数据
-- -------------------- ---- -------
----- ------- - ---------------------- ---
----------------- - -------- ------- -
----- -- - --------------------
----- ----------- - ----------------------------- -------------
----- ----- - -------------------------------------
----- ------------- - ----------------
--------------------- - -------- ------- -
-------------------------
--
----------------------- - -------- ------- -
-----------------------
--
--总结
通过本文的介绍，你现在应该了解了 indexeddbshim 的基本使用方法。当项目需要使用 IndexedDB，而需要兼容一些旧版本的浏览器时，indexeddbshim 可以帮助我们快速解决兼容性问题。
当然，使用 indexeddbshim 不能完全替代原生 IndexedDB。有时 indexeddbshim 的性能可能比原生 API 差，所以还需根据项目实际情况考虑是否使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/155776