JavaScript >> Javascript 文檔 >  >> JavaScript

快速提示:使用 LocalForage 讓 IndexedDB 輕而易舉

IndexedDB 是一個本地 NoSQL 數據庫,允許開發人員在瀏覽器中安全地存儲數據。它具有出色的跨平台支持,適用於任何類型的數據,並且功能強大,足以構建離線工作的應用程序。

儘管它可能是客戶端存儲的最佳解決方案,但 IndexedDB 有一個關鍵缺陷 - 它是低級 API。諸如事務、游標和缺乏對 Promise 的支持之類的東西會使 IndexedDB 過於復雜,並且使用起來很累。

值得慶幸的是,有一種對開發人員更友好的方式!

LocalForage 救援

LocalForage 是一個開源的 JavaScript 庫,它使使用瀏覽器內的數據庫變得更加愉快。從外觀上看,它的 API 與 localStorage 非常相似,而在底層,它隱藏了 IndexedDB 的全部功能。

與使用 IndexedDB 執行任何操作所需的 15 行代碼相比,localForage 創建數據庫並訪問其條目歸結為使用一種簡單的方法。它還添加了對 Promise 的急需支持以及其他有用的實用程序。

安裝

將 localForage 添加到項目中非常簡單。將其直接放入 HTML 中:

<script src="assets/js/localforage.min.js"></script>

或者使用您選擇的包管理器進行安裝:

npm install localForage --save

該庫對瀏覽器友好,可以與 Webpack 等捆綁器一起使用。 localForage 接口不需要任何額外的初始化或加載,因此我們可以在它可用時立即使用它。

import localforage from "localforage";
localforage.setItem('key', 'value');

寫入商店

由於我們不必設置或創建新數據庫,因此我們可以直接進入並將一些數據添加到我們的存儲中。這是通過 setItem 完成的 方法,採用兩個參數 - key價值 .

  • key - 唯一的、區分大小寫的標識符,將在我們以後想要訪問該項目時使用。使用 setItem 再次在同一個鍵上將覆蓋它。
  • value - 我們要存儲的數據。它可以是任何有效的字符串、數字、對象、數組或文件 blob。

該過程是異步的,因此如果我們想對數據做其他事情並處理錯誤,我們必須使用 Promise 或回調。

var hexColors = {
    red: 'ff0000',
    green: '00ff00',
    yellow: 'ffff00'
};

localforage.setItem('colors', hexColors).then(function (value) {
    console.log(value.red);
}).catch(function(err) {
    console.error(err);
});

從存儲中讀取

從數據庫中獲取項目的工作方式幾乎相同。我們只需使用 getItem ,傳遞密鑰的名稱,並使用 promise 處理數據。

localforage.getItem('colors').then(function (value) {
    console.log(value.red); 
}).catch(function(err) {
    console.error(err);
});

如果我們嘗試獲取一個不存在的鍵,promise 將成功解析,但裡面的值將是 null .

其他方法

LocalForage 有一些其他有用的方法來處理數據庫。它們都像 setItem 一樣易於使用 和 getItem ,還支持承諾或回調。

  • removeItem(key) - 從存儲中刪除鍵/值對。
  • keys() - 返回所有鍵名的數組(只有名稱)。
  • iterate(callback) - 像 forEach 一樣工作,期待回調函數並遍歷所有鍵/值對。
  • length() - 返回商店中的商品數量。
  • clear() - 掃蕩商店。

多個數據庫

到目前為止,本文中的示例使用了 localforage 接口直接導致單個全局存儲。如果我們需要不止一個商店,我們可以使用 createInstance 創建任意數量的實例 :

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

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

每個商店都是完全獨立的,只能訪問自己的數據(NoSQL 數據庫大多是非關係型的)。

dogStore.setItem('Jake', 'Good boy');
catStore.getItem('Jake').then(function (value) {
    console.log(value);  // Will result in null
});

結論

如果您正在尋找一種管理客戶端數據庫的簡單方法,localForage 是目前可用的最佳工具之一。它的 API 提供了所有需要的實用程序,讓您有足夠的自由來組織您認為合適的存儲。

  • 官方文檔 - 該項目的文檔不是很詳細,但涵蓋了您需要了解的大部分內容。
  • GitHub 上的 localForage - 存儲庫非常活躍,如果您對庫有任何問題,請務必先檢查此處的問題。
  • angular-localForage - 用於在 Angular 中使用 localForage 的插件。

Tutorial JavaScript 教程
  1. 15 多篇 2 月學習 JavaScript 的文章

  2. 六個小但很棒的 ES7 + ES8 功能

  3. Maker Faire Tokyo 2020:物聯網武士劍和遠程 VR 存在

  4. 如何在 Node.js 中處理文件上傳

  5. 使用 Javascript 自動完成搜索

  6. GraphQL + TypeScript - 我發現了什麼

  7. 如何在 Node.js 應用中使用 Firebase 實時數據庫

  1. 11. JavaScript 引擎

  2. 測試 JavaScript 中是否未定義某些內容

  3. 為什麼我不能訪問 TypeScript 私有成員?

  4. 如何從消息提及中找到 discord.js 用戶的權限?

  5. 使用 NuxtJs 和 Express 使用 Chatbot 創建聊天應用程序

  6. 字符串 endWith() 方法

  7. 3.2 認真對待 Firebase V9 - 使用 Firebase 模擬器

  1. 使用 Angular 構建密碼強度檢查器

  2. 讓我們使用 React Hooks 構建一個搜索欄

  3. 仍在嘗試使用 Three.js 和 React 繪製思維導圖

  4. 如何結合 Webpack 4 和 Babel 7 創建一個出色的 React 應用程序