IndexedDB 本地存储数据

localStorage 是前端本地存储的一种，其容量一般在 5M-10M 左右，用来缓存一些简单的数据基本够用，毕竟定位也不是大数据量的存储。其实浏览器是有提供大数据量的本地存储的如 IndexedDB 存储数据大小一般在 250M 以上。

IndexedDB

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

我们以Todolist为例创建存储数据库

<form>
    <input type="text" id="new-todo" placeholder="new todo here">
    <button id="new-button" type="submit">Add Todo</button>
  </form>

let todos = [];//界面数据存储
//渲染待办事项
function renderTodos() {
  console.log("Rendering Todos: ", todos);
}

//连接到 IndexedDB
function getIndexDB() {
  const indexedDB =
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB ||
    window.msIndexedDB ||
    window.shimIndexedDB;
  if (indexedDB) {
    return indexedDB;
  }
  console.error("indexedDB not supported by this browser");
  return null;
}
const indexedDB = getIndexDB();

// 打开数据库
const request = indexedDB.open("todoDB", 1);

// 监听 request.onerror 事件，以防访问数据库时出现任何错误。
request.onerror = (event) => console.error("IndexDB Error: ", event);

//监听 request.onupgradeneeded，该事件在尝试以高于当前版本号的版本号打开数据库时运行。
// 1、获取数据库对象（如果 onupgradeneeded 函数正在运行，你知道它是可用的）。
// 2、创建一个名为 todos 的新存储/表/集合，其键为 id，这是一个自动递增的数字（记录的唯一标识符）。
// 3、指定 todos_text 作为索引，这允许我们以后通过 todos_text 搜索数据库。如果你不计划通过特定属性搜索，则不必创建索引。
request.onupgradeneeded = () => {
  // 获取数据库连接
  const db = request.result;
  // 定义新的存储
  const store = db.createObjectStore("todos", {
    keyPath: "id",
    autoIncrement: true,
  });
  // 指定属性为索引
  store.createIndex("todos_text", ["text"], { unique: false });
};

// 监听 request.onsuccess 事件，该事件在数据库连接和存储全部设置和配置完毕后运行。
// 1、获取数据库连接。
// 2、创建一个事务。
// 3、指定我们正在处理的存储。
// 4、运行 getAll 查询以获取该存储中的所有文档/记录。
// 5、在查询特定的 onsuccess 事件中，我们循环遍历所有待办事项，将它们推送到 todos 数组中，并调用 renderTodos() 以便将它们渲染到 DOM 中。
request.onsuccess = () => {
  console.log("Database Connection Established");
  // 获取数据库连接
  const db = request.result;
  // 创建一个事务对象
  const tx = db.transaction("todos", "readwrite");
  // 创建一个事务与我们的存储
  const todosStore = tx.objectStore("todos");
  // 获取所有待办事项
  const query = todosStore.getAll();
  // 使用查询中的数据
  query.onsuccess = () => {
    console.log("All Todos: ", query.result);
    for (const todo of query.result) {
      todos.push(todo.text);
    }
    renderTodos();
  };
};

renderTodos();

// 已经设置了数据库，可以按照相同的模式处理任何其他事件
const button = document.querySelector("#new-button");
const textInput = document.querySelector("#new-todo");
button.addEventListener("click", (event) => {
  // 设置事务
  const db = request.result;
  const tx = db.transaction("todos", "readwrite");
  const todosStore = tx.objectStore("todos");
  // 添加待办事项
  const text = textInput.value;
  todos.push(text); // 添加到待办事项数组
  todosStore.put({ text }); // 添加到 IndexedDB
  renderTodos(); // 更新 DOM
});

插件localforage

localforage 拥有类似 localStorage API，它能存储多种类型的数据如 Array ArrayBuffer Blob Number Object String，而不仅仅是字符串。 下载地址：github.com/localForage…

• getItem 根据数据的 key 获取数据 差不多返回 null
• setItem 根据数据的 key 设置数据（存储undefined时getItem获取会返回 null）
• removeItem 根据key删除数据
• length 获取key的数量
• key 根据 key 的索引获取其名
• keys 获取数据仓库中所有的 key。
• iterate 迭代数据仓库中的所有 value/key 键值对。

  <form>
    <input type="text" id="new-todo" placeholder="new todo here">
    <button id="new-button" type="submit">Add Todo</button>
  </form>

    let todos = [];//界面数据存储
    //渲染待办事项
    function renderTodos() {
      console.log("Rendering Todos: ", todos);
    }

    localforage.getItem('somekey').then(function (value) {
      // 当离线仓库中的值被载入时，此处代码运行
      todos = Array.isArray(value) ? value : [];
      renderTodos();
    }).catch(function (err) {
      // 当出错时，此处代码运行
      console.log(err);
    });
    renderTodos();

    // 已经设置了数据库，可以按照相同的模式处理任何其他事件
    const button = document.querySelector("#new-button");
    const textInput = document.querySelector("#new-todo");
    button.addEventListener("click", (event) => {
      const text = textInput.value;
      todos.push(text); // 添加到待办事项数组
      localforage.setItem("somekey", todos);
      renderTodos(); // 更新 DOM
    });

配置

localforage.config({ name: 'My-localStorage' }); 设置仓库的名字，不同的名字代表不同的仓库，当一个应用需要多个本地仓库隔离数据的时候就很有用。

const store = localforage.createInstance({
    name: "nameHere"
});

const otherStore = localforage.createInstance({
    name: "otherName"
});

// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
store.setItem("key", "value");
otherStore.setItem("key", "value2")

删除仓库

// 调用时，若不传参，将删除当前实例的 “数据仓库” 。
localforage.dropInstance().then(function() {
  console.log('Dropped the store of the current instance').
});

// 调用时，若参数为一个指定了 name 和 storeName 属性的对象，会删除指定的 “数据仓库”。
localforage.dropInstance({
  name: "otherName",
  storeName: "otherStore"
}).then(function() {
  console.log('Dropped otherStore').
});

// 调用时，若参数为一个仅指定了 name 属性的对象，将删除指定的 “数据库”（及其所有数据仓库）。
localforage.dropInstance({
  name: "otherName"
}).then(function() {
  console.log('Dropped otherName database').
});

插件idb-keyval

idb-keyval是用IndexedDB实现的一个超级简单的基于 promise 的键值存储。

npm npm install idb-keyval
# 浏览器直接引入 <script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js"></script>

// 全部引入
import idbKeyval from 'idb-keyval';

idbKeyval.set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));
  
// 按需引入会摇树
import { get, set } from 'idb-keyval';

set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));
  
get('hello').then((val) => console.log(val));

set 设置数据

• 值可以是 数字、数组、对象、日期、Blobs等，尽管老Edge不支持null。
• 键可以是数字、字符串、日期，（IDB也允许这些值的数组，但IE不支持）。

import { set } from 'idb-keyval';

set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

setMany 设置多个数据

import { set, setMany } from 'idb-keyval';

// 不应该:
Promise.all([set(123, 456), set('hello', 'world')])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

// 这样做更快:
setMany([
  [123, 456],
  ['hello', 'world'],
])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

get 获取数据

import { get } from 'idb-keyval';
// logs: "world"
get('hello').then((val) => console.log(val));

getMany 获取多个数据

import { get, getMany } from 'idb-keyval';
// 不应该:
Promise.all([get(123), get('hello')]).then(([firstVal, secondVal]) =>
  console.log(firstVal, secondVal),
);
// 这样做更快:
getMany([123, 'hello']).then(([firstVal, secondVal]) =>
  console.log(firstVal, secondVal),
);

del 删除数据

import { del } from 'idb-keyval';

del('hello');

delMany 删除多个数据

import { del, delMany } from 'idb-keyval';

// 不应该:
Promise.all([del(123), del('hello')])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

// 这样做更快:
delMany([123, 'hello'])
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

update 排队更新数据，防止由于异步导致数据更新问题

// Instead:
import { update } from 'idb-keyval';

update('counter', (val) => (val || 0) + 1);
update('counter', (val) => (val || 0) + 1);

其他方法

//clear 清除所有数据
clear();
//entries 返回 [key, value] 形式的数据
// logs: [[123, 456], ['hello', 'world']]
entries().then((entries) => console.log(entries));
// keys 获取所有数据的 key
// logs: [123, 'hello']
keys().then((keys) => console.log(keys));
//values 获取所有数据 value
// logs: [456, 'world']
values().then((values) => console.log(values));

createStore 自定义仓库

文字解释：表 === store === 商店 一个意思 使用 createStore 创建的数据库一个库只会创建一个表即：同一个库有不可以有两个表,不同的库 有相同的表名 这是可以的

// 自定义数据库名称及表名称
// 创建一个数据库: 数据库名称为 tang_shi， 表名为 table1
const tang_shi_table1 = idbKeyval.createStore('tang_shi', 'table1')
// 向对应仓库添加数据
idbKeyval.set('add', 'table1 的数据', tang_shi_table1)
// 默认创建的仓库名称为 keyval-store 表名为 keyval
idbKeyval.set('add', '默认的数据')

demo

  <form>
    <input type="text" id="new-todo" placeholder="new todo here">
    <button id="new-button" type="submit">Add Todo</button>
  </form>

    let todos = [];//界面数据存储
    //渲染待办事项
    function renderTodos() {
      console.log("Rendering Todos: ", todos);
    }

    idbKeyval.get('somekey').then(function (value) {
      // 当离线仓库中的值被载入时，此处代码运行
      todos = Array.isArray(value) ? value : [];
      renderTodos();
    }).catch(function (err) {
      // 当出错时，此处代码运行
      console.log(err);
    });
    renderTodos();

    // 已经设置了数据库，可以按照相同的模式处理任何其他事件
    const button = document.querySelector("#new-button");
    const textInput = document.querySelector("#new-todo");
    button.addEventListener("click", (event) => {
      const text = textInput.value;
      todos.push(text); // 添加到待办事项数组
      idbKeyval.set('somekey', todos)
        .then(() => console.log('It worked!'))
        .catch((err) => console.log('It failed!', err));
      renderTodos(); // 更新 DOM
    });