前端本地存儲(chǔ)方案localForage在vue3中使用方法

更新時(shí)間：2024年09月04日 11:05:09 作者：qq_37656005

localForage是前端本地存儲(chǔ)的庫(kù),支持多種存儲(chǔ)后端,并提供了一致的API來(lái)存儲(chǔ)和檢索數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于前端本地存儲(chǔ)方案localForage在vue3中使用的相關(guān)資料,需要的朋友可以參考下

前言

前端有多種本地存儲(chǔ)方案可供選擇，常見的有：

Cookie：小型的文本文件，存儲(chǔ)少量數(shù)據(jù)
Web Storage ：包括：localStorage和sessionStorage，存儲(chǔ)數(shù)據(jù)有上限（5M）左右
IndexedDB：一種高級(jí)的客戶端存儲(chǔ)API，存儲(chǔ)量大、高版本瀏覽器兼容性較好

這些本地存儲(chǔ)方案各有優(yōu)缺點(diǎn)，近期發(fā)現(xiàn)一種前端本地存儲(chǔ)的庫(kù) localForage，遵循“漸進(jìn)增強(qiáng)”或“優(yōu)雅降級(jí)”的原則，集合以上多種方式，使用異步API封裝了Web Storage、IndexedDB和WebSQL的庫(kù)，提供了簡(jiǎn)單易用的方法來(lái)存儲(chǔ)和檢索數(shù)據(jù)，API 相對(duì)簡(jiǎn)單，易于上手，下面開始正式介紹localForage用法。

localForage

localForage 是一個(gè)快速而簡(jiǎn)單的 JavaScript 存儲(chǔ)庫(kù)。通過(guò)使用異步存儲(chǔ)（IndexedDB 或 WebSQL）和簡(jiǎn)單的類 localStorage 的 API ，localForage 能改善 Web 應(yīng)用的離線體驗(yàn)。

在不支持 IndexedDB 或 WebSQL 的瀏覽器中，localForage 使用 localStorage。

github地址： https://github.com/localForage/localForage
API文檔：https://localforage.github.io/localForage/#data-api-setitem

第一種使用方法

安裝引入

// 通過(guò)npm安裝
npm install --save localforage
// 引入
import localforage from 'localforage'

// 或通過(guò) bower 引入
<script src="localforage.js"></script>

創(chuàng)建indexedDB

const firstIndexedDB = localforage.createInstance({
  name: 'myFirstIndexedDB',
  // 支持config所有配置
  // storeName: 'keyvaluepairs', // 僅接受字母，數(shù)字和下劃線
})

存值

//存儲(chǔ)字符串
firstIndexedDB.setItem("data1", "今天是個(gè)好日子");
//存儲(chǔ)對(duì)象
firstIndexedDB.setItem("data2", {a:1,b: 2});
//存儲(chǔ)數(shù)組對(duì)象
firstIndexedDB.setItem("data3", [{a:1,b: 2}, {a:2,b:3}, {a:3,b:4}]);

4. 取值（由于indexedDB的存取都是異步的，建議使用 promise.then() 或 async/await 去讀值，如果 key 不存在，getItem() 將返回 null。）

//第一種方法
firstIndexedDB.getItem('data1').then(value=> {
 console.log("數(shù)據(jù)data1",value);
}).catch(err => {
  console.log('錯(cuò)誤信息', err)
});
firstIndexedDB.getItem('data2').then(value=> {
 console.log("數(shù)據(jù)data2",value);
}).catch(err => {
  console.log('錯(cuò)誤信息', err)
});

//第二種方法
try {
  const value = await firstIndexedDB.getItem('data3');
  console.log("數(shù)據(jù)3",value);
} catch (err) {
    console.log('錯(cuò)誤信息', err)
}

5. 刪除

//輸入key值
firstIndexedDB.removeItem('data3');

重置清空數(shù)據(jù)庫(kù)

firstIndexedDB.clear();

獲取數(shù)據(jù)庫(kù)存儲(chǔ)key的數(shù)量

firstIndexedDB.length().then(numberOfKeys=> {
    // 輸出數(shù)據(jù)庫(kù)的大小
    console.log("數(shù)據(jù)庫(kù)長(zhǎng)度",numberOfKeys);
}).catch(function(err) {
    console.log("出錯(cuò)",err);
});

8. 根據(jù)key的索引獲取名稱

firstIndexedDB.key(2).then(keyName=> {
    // key 名
    console.log("key 名",keyName);
}).catch(function(err) {
    console.log("出錯(cuò)",err);
});

9. 獲取數(shù)據(jù)庫(kù)所有key值

firstIndexedDB.keys().then(function(keys) {
    console.log("所有key集合",keys);
}).catch(function(err) {
    console.log("出錯(cuò)",err);
});

10. 迭代循環(huán)打印所有key-value值

 firstIndexedDB.iterate(function(value, key, iterationNumber) {
     // 此回調(diào)函數(shù)將對(duì)所有 key/value 鍵值對(duì)運(yùn)行
     console.log([key, value,iterationNumber]);
 }).then(function() {
     console.log('迭代完成');
 }).catch(function(err) {
     console.log("出錯(cuò)",err);
 });

11. 提前退出迭代循環(huán)

 firstIndexedDB.iterate(function(value, key, iterationNumber) {
    // 此回調(diào)函數(shù)將對(duì)所有 key/value 鍵值對(duì)運(yùn)行
      if (iterationNumber < 3) {
          console.log([key, value, iterationNumber]);
      } else {
          return [key, value, iterationNumber];
      }
  }).then(function() {
      console.log('退出迭代');
  }).catch(function(err) {
      console.log("出錯(cuò)",err);
  });

創(chuàng)建多實(shí)例

var secondIndexedDB = localforage.createInstance({
  name: "secondIndexedDB"
});

var thirdIndexedDB = localforage.createInstance({
  name: "thirdIndexedDB"
});

設(shè)置某個(gè)數(shù)據(jù)倉(cāng)庫(kù) key 的值

secondIndexedDB.setItem("key", "value");
thirdIndexedDB.setItem("key", "value2");

刪除數(shù)據(jù)庫(kù) dropInstance

14.1 調(diào)用時(shí)，若不傳參，則刪除當(dāng)前實(shí)例的數(shù)據(jù)倉(cāng)庫(kù)

localforage.dropInstance().then(function() {
  console.log('刪除當(dāng)前實(shí)例的數(shù)據(jù)倉(cāng)庫(kù)')
});

14.2 調(diào)用時(shí)，若參數(shù)是指定了 name 和 storeName 屬性的對(duì)象，會(huì)刪除指定的數(shù)據(jù)倉(cāng)庫(kù)

localforage.dropInstance({
  name: "thirdIndexedDB",
  storeName: "keyvaluepairs"
}).then(function() {
  console.log('刪除指定的數(shù)據(jù)庫(kù)下的指定數(shù)據(jù)倉(cāng)庫(kù)')
});

14.3 調(diào)用時(shí)，若參數(shù)僅指定了 name 屬性的對(duì)象，將刪除指定的數(shù)據(jù)庫(kù)（及其所有數(shù)據(jù)倉(cāng)庫(kù)）

localforage.dropInstance({
  name: "secondIndexedDB"
}).then(function() {
  console.log('刪除指定的數(shù)據(jù)庫(kù)（及其所有數(shù)據(jù)倉(cāng)庫(kù)）')
});

第二種使用方法

選擇特定存儲(chǔ)引擎

默認(rèn)情況下，localForage 按照以下順序選擇數(shù)據(jù)倉(cāng)庫(kù)的后端驅(qū)動(dòng)：

（1） IndexedDB
（2） WebSQL
（3） localStorage

如果你想強(qiáng)制使用特定的驅(qū)動(dòng)，可以使用 setDriver()，參數(shù)為以下的某一個(gè)或多個(gè)：

（1） localforage.INDEXEDDB
（2） localforage.WEBSQL
（3） localforage.LOCALSTORAGE

強(qiáng)制設(shè)置 localStorage 為后端的驅(qū)動(dòng)

localforage.setDriver(localforage.LOCALSTORAGE);

列出可選的驅(qū)動(dòng)，以優(yōu)先級(jí)排序

localforage.setDriver([localforage.LOCALSTORAGE, localforage.INDEXEDDB]);

配置
可以通過(guò) config() 方法設(shè)置數(shù)據(jù)庫(kù)信息?？捎玫倪x項(xiàng)有 driver，name，storeName，version，size，和 description。

localforage.config({
  driver      : localforage.LOCALSTORAGE, // 使用 LOCALSTORAGE；也可以使用 setDriver()
  name        : 'firstIndexedDB',
  version     : 1.0,
  size        : 4980736, // 數(shù)據(jù)庫(kù)的大小，單位為字節(jié)。現(xiàn)僅 WebSQL 可用
  storeName   : 'keyvaluepairs1', // 僅接受字母，數(shù)字和下劃線
  description : 'some description'
});

存值
注意：在數(shù)據(jù)交互之前，你必須先調(diào)用 config()。即在使用 getItem()，setItem()，removeItem()，clear()，key()，keys() 或 length() 前要先調(diào)用 config()。

localforage.setItem("data1", "今天是個(gè)好日子");

5. 判斷異步驅(qū)動(dòng)程序初始化過(guò)程是否已完成

localforage.ready().then(()=> {
  // 當(dāng) localforage 將指定驅(qū)動(dòng)初始化完成時(shí)，此處代碼運(yùn)行
  console.log(localforage.driver()); //返回正在使用的驅(qū)動(dòng)的名字 "asyncStorage"
}).catch( e=> {
  console.log(e); // `No available storage method found.`
  // 當(dāng)沒(méi)有可用的驅(qū)動(dòng)時(shí)，`ready()` 將會(huì)失敗
});

判斷瀏覽器是否支持driverName 返回布爾值

console.log(localforage.supports(localforage.INDEXEDDB));

總結(jié)

到此這篇關(guān)于前端本地存儲(chǔ)方案localForage在vue3中使用方法的文章就介紹到這了,更多相關(guān)前端本地存儲(chǔ)方案localForage使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: