1. 簡介

說到本地存儲數(shù)據(jù)，首先想到的是 localStorage，應(yīng)該很多小伙伴都用過，使用很簡單。

然而，localStorage 卻有下面一些缺點：

• 存儲容量限制，大部分瀏覽器應(yīng)該最多5M。我就遇到過localStorage存儲字符然后尺寸爆掉的情況；
• 僅支持字符串，如果是存對象還需將使用 JSON.stringify 和 JSON.parse 方法互相轉(zhuǎn)換，有些啰嗦；
• 讀取都是同步的。大多數(shù)情況下，還挺好使的。如果存儲數(shù)據(jù)比較大，如一張重要圖片base64格式存儲了，再讀可能會有可感知的延遲時間；

localforage 的作用就是用來規(guī)避上面 localStorage 的缺點，同時保留 localStorage 的優(yōu)點而設(shè)計的。

localForage 是一個 JavaScript 庫，通過簡單類似 localStorage API 的 異步存儲 來改進(jìn)你的 Web 應(yīng)用程序的離線體驗。

它能存儲多種類型的數(shù)據(jù)，而不僅是字符串（包括：Array、ArrayBuffer、Blob、Float32Array、Float64Array、Int8Array、Int16Array、Int32Array、Number、Object、Uint8Array、Uint8ClampedArray、Uint16Array、Uint32Array、String）。

localForage 有一個優(yōu)雅降級策略，若瀏覽器不支持 IndexedDB 或 WebSQL，則使用 localStorage。

在所有主流瀏覽器中都可用：Chrome，F(xiàn)irefox，IE 和 Safari（包括 Safari Mobile）。

localForage 提供回調(diào) API 同時也支持 ES6 Promises API，可以自行選擇。

傳送門：localForage 中文文檔

2. 使用方法

安裝

npm i localforage

localforage npm 地址

引入

// main.js
import localForage from 'localforage';
Vue.prototype.$forage = localForage;

<template>
  <div>
    <button @click="forageSetVal">forageSetVal</button>
    <button @click="forageGetVal">forageGetVal</button>
    <button @click="forageRemoveVal">forageRemoveVal</button>
    <ul>
      <li 
        v-for="item in userInfos" 
        :key="item.name">
        {{item.name}} | {{item.city}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfos:[],
    };
  },
  methods:{
    // 保存數(shù)據(jù)
    forageSetVal(){
      const userList = [
        {
          name:'張三',
          city:'北京',
        },{
          name:'李四',
          city:'南京',
        },{
          name:'王五',
          city:'深圳',
        }
      ]
      /*
      * setItem(key, value, successCallback)
      * 將數(shù)據(jù)保存到離線倉庫。
      */
      this.$forage.setItem('userList', userList).then((val) => {
        console.log('setItem',val)
      }).catch(err => {
        console.log(err)
      })
    },
    // 獲取數(shù)據(jù)
    forageGetVal(){
      /*
      * getItem(key, successCallback)
      * 從倉庫中獲取 key 對應(yīng)的值并將結(jié)果提供給回調(diào)函數(shù)。如果 key 不存在，getItem() 將返回 null。
      * 當(dāng)存儲 undefined 時， getItem() 也會返回 null。由于 localStorage 限制，同時出于兼容性的原因 localForage 無法存儲 undefined。
      */
      this.$forage.getItem('userList').then((val) => {
        console.log('getItem',val)
        this.userInfos = val;
      }).catch(err => {
        console.log(err)
      });
    },
    // 從離線倉庫中刪除 key 對應(yīng)的值
    forageRemoveVal(){
      /*
      * removeItem(key, successCallback)
      * 從離線倉庫中刪除 key 對應(yīng)的值。
      */
      this.$forage.removeItem('userList').then(() => {
        console.log('removeItem');
      }).catch(function(err) {
        console.log(err);
      });
    },
  },
};
</script>

先觸發(fā) forageSetVal 保存數(shù)據(jù)

再觸發(fā) forageGetVal 獲取數(shù)據(jù)

最后觸發(fā) forageRemoveVal 刪除數(shù)據(jù)

3. localforage 和 indexDB 的區(qū)別

indexDB 為本地數(shù)據(jù)庫存儲，其功能非常強(qiáng)大，再復(fù)雜的結(jié)構(gòu)存儲都不在話下。localStorage 只是使用了其功能中的一部分，很多功能受限，如：localStorage 一次只能存一個字段。

indexDB幾乎空間無限，性能也不錯，各種數(shù)據(jù)結(jié)構(gòu)都支持，為何總感覺在業(yè)內(nèi)不溫不火呢？

很重要的原因之一就是上手成本，包括2方面：

• 前端需要了解數(shù)據(jù)庫的一些基本概念，如：表，游標(biāo)，事務(wù)，鎖等。而業(yè)界普遍的前端都是與頁面打交道的，數(shù)據(jù)庫操作屬于后端的后端了，離的有些遠(yuǎn)，于是，很多前端都不了解，需要從零開始的數(shù)據(jù)庫學(xué)習(xí)；
• indexedDB 的 API 又多又長又紛雜，學(xué)習(xí)成本高，容易記不住，網(wǎng)上好的資源少；

localforage 的出現(xiàn)可謂 曲 線 救 國，通常我們的數(shù)據(jù)存儲并不需要特別復(fù)雜，只要不是完完全全的離線開發(fā)，localforage 足矣。

既不浪費(fèi) indexDB 的好，又避開了 indexDB 高上手成本的坑。

從這個角度看，indexDB 應(yīng)該要謝謝 localforage。

當(dāng)然，如果存儲的數(shù)據(jù)是負(fù)責(zé)的多行多列表結(jié)構(gòu)，還是老老實實花點功夫?qū)W習(xí)學(xué)習(xí) indexDB 的使用。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論