# 引入下載的 localforage 即可使用
<script src="localforage.js"></script>
<script>console.log('localforage is: ', localforage);</script>
# 通過 npm 安裝：
npm install localforage
# 或通過 bower：
bower install localforage

localforage.getItem('somekey').then(function(value) {
    // 當(dāng)離線倉庫中的值被載入時(shí)，此處代碼運(yùn)行
    console.log(value);
}).catch(function(err) {
    // 當(dāng)出錯(cuò)時(shí)，此處代碼運(yùn)行
    console.log(err);
});
// 回調(diào)版本：
localforage.getItem('somekey', function(err, value) {
    // 當(dāng)離線倉庫中的值被載入時(shí)，此處代碼運(yùn)行
    console.log(value);
});

const store = localforage.createInstance({
    name: "nameHere"
});
const otherStore = localforage.createInstance({
    name: "otherName"
});
// 設(shè)置某個(gè)數(shù)據(jù)倉庫 key 的值不會影響到另一個(gè)數(shù)據(jù)倉庫
store.setItem("key", "value");
otherStore.setItem("key", "value2");

// 調(diào)用時(shí)，若不傳參，將刪除當(dāng)前實(shí)例的 “數(shù)據(jù)倉庫” 。
localforage.dropInstance().then(function() {
  console.log('Dropped the store of the current instance').
});
// 調(diào)用時(shí)，若參數(shù)為一個(gè)指定了 name 和 storeName 屬性的對象，會刪除指定的 “數(shù)據(jù)倉庫”。
localforage.dropInstance({
  name: "otherName",
  storeName: "otherStore"
}).then(function() {
  console.log('Dropped otherStore').
});
// 調(diào)用時(shí)，若參數(shù)為一個(gè)僅指定了 name 屬性的對象，將刪除指定的 “數(shù)據(jù)庫”（及其所有數(shù)據(jù)倉庫）。
localforage.dropInstance({
  name: "otherName"
}).then(function() {
  console.log('Dropped otherName database').
});

npm install idb-keyval

// 全部引入
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));

import { set } from 'idb-keyval';
set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch((err) => console.log('It failed!', err));

import { set, setMany } from 'idb-keyval';
// 不應(yīng)該:
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));

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

import { get, getMany } from 'idb-keyval';
// 不應(yīng)該:
Promise.all([get(123), get('hello')]).then(([firstVal, secondVal]) =>
  console.log(firstVal, secondVal),
);
// 這樣做更快:
getMany([123, 'hello']).then(([firstVal, secondVal]) =>
  console.log(firstVal, secondVal),
);

import { del } from 'idb-keyval';
del('hello');

import { del, delMany } from 'idb-keyval';
// 不應(yīng)該:
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));

// Don't do this:
import { get, set } from 'idb-keyval';
get('counter').then((val) =>
  set('counter', (val || 0) + 1);
);
get('counter').then((val) =>
  set('counter', (val || 0) + 1);
);

// Instead:
import { update } from 'idb-keyval';
update('counter', (val) => (val || 0) + 1);
update('counter', (val) => (val || 0) + 1);

import { clear } from 'idb-keyval';
clear();

import { entries } from 'idb-keyval';
// logs: [[123, 456], ['hello', 'world']]
entries().then((entries) => console.log(entries));

import { keys } from 'idb-keyval';
// logs: [123, 'hello']
keys().then((keys) => console.log(keys));

import { values } from 'idb-keyval';
// logs: [456, 'world']
values().then((values) => console.log(values));

// 自定義數(shù)據(jù)庫名稱及表名稱
// 創(chuàng)建一個(gè)數(shù)據(jù)庫: 數(shù)據(jù)庫名稱為 tang_shi， 表名為 table1
const tang_shi_table1 = idbKeyval.createStore('tang_shi', 'table1')
// 向?qū)?yīng)倉庫添加數(shù)據(jù)
idbKeyval.set('add', 'table1 的數(shù)據(jù)', tang_shi_table1)
// 默認(rèn)創(chuàng)建的倉庫名稱為 keyval-store 表名為 keyval
idbKeyval.set('add', '默認(rèn)的數(shù)據(jù)')

// 同一個(gè)庫有不可以有兩個(gè)表，custom-store-2 不會創(chuàng)建成功:
const customStore = createStore('custom-db-name', 'custom-store-name');
const customStore2 = createStore('custom-db-name', 'custom-store-2');
// 不同的庫 有相同的表名 這是可以的:
const customStore3 = createStore('db3', 'keyval');
const customStore4 = createStore('db4', 'keyval');