1. 簡(jiǎn)介

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

然而，localStorage 卻有下面一些缺點(diǎn)：

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

localforage 的作用就是用來(lái)規(guī)避上面 localStorage 的缺點(diǎn)，同時(shí)保留 localStorage 的優(yōu)點(diǎn)而設(shè)計(jì)的。

localForage 是一個(gè) JavaScript 庫(kù)，通過(guò)簡(jiǎn)單類似 localStorage API 的 異步存儲(chǔ) 來(lái)改進(jìn)你的 Web 應(yīng)用程序的離線體驗(yàn)。

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

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

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

localForage 提供回調(diào) API 同時(shí)也支持 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ù)保存到離線倉(cāng)庫(kù)。
      */
      this.$forage.setItem('userList', userList).then((val) => {
        console.log('setItem',val)
      }).catch(err => {
        console.log(err)
      })
    },
    // 獲取數(shù)據(jù)
    forageGetVal(){
      /*
      * getItem(key, successCallback)
      * 從倉(cāng)庫(kù)中獲取 key 對(duì)應(yīng)的值并將結(jié)果提供給回調(diào)函數(shù)。如果 key 不存在，getItem() 將返回 null。
      * 當(dāng)存儲(chǔ) undefined 時(shí)， getItem() 也會(huì)返回 null。由于 localStorage 限制，同時(shí)出于兼容性的原因 localForage 無(wú)法存儲(chǔ) undefined。
      */
      this.$forage.getItem('userList').then((val) => {
        console.log('getItem',val)
        this.userInfos = val;
      }).catch(err => {
        console.log(err)
      });
    },
    // 從離線倉(cāng)庫(kù)中刪除 key 對(duì)應(yīng)的值
    forageRemoveVal(){
      /*
      * removeItem(key, successCallback)
      * 從離線倉(cāng)庫(kù)中刪除 key 對(duì)應(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 為本地?cái)?shù)據(jù)庫(kù)存儲(chǔ)，其功能非常強(qiáng)大，再?gòu)?fù)雜的結(jié)構(gòu)存儲(chǔ)都不在話下。localStorage 只是使用了其功能中的一部分，很多功能受限，如：localStorage 一次只能存一個(gè)字段。

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

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

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

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

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

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

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

總結(jié)

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

最新評(píng)論