這樣寫離線存儲，老闆娘再也沒讓我加過班 。localForage的使用

首先按照國際慣例，無中生個友

這位朋友最近遇到了點頭疼的問題，localStorage容量過小，切不太好區分同一個域名下的不一樣項目，恰巧，有這麼個包——localForage能夠解決。不過localForage只能用.then或者回調函數的方式使用，對於相似於vuex這種默認給state設置離線存儲的值的時候，就顯得不太方便

原文檔：localForage文檔

localForage 是一個 JavaScript 庫，經過簡單相似 localStorage API 的異步存儲來改進你的 Web 應用程序的離線體驗。它能存儲多種類型的數據，而不單單是字符串。

localForage 有一個優雅降級策略，若瀏覽器不支持 IndexedDB 或 WebSQL，則使用 localStorage。在全部主流瀏覽器中均可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

localForage 提供回調 API 同時也支持 ES6 Promises API，你能夠自行選擇。

localForage的使用很簡單，相關使用方法請移步原文檔，這裏主要介紹一下本身對使用localForage完成同步取值（相似localStorage直接讀值）的操做。個人理解是，作成一個函數，使用async await完成（ES2020新增了頂級Await,屆時能夠忽略此類寫法）。以常見的在vuex中初始設置一個默認值爲例，先看main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import storeData from './store'
import localforage from 'localforage'
localforage.config({
  name: 'fangtu' // 給當前項目的存儲空間命名爲fangtu
});

// 作成一個自執行的async函數
(async function () {
  Vue.config.productionTip = false
  const store = await storeData
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')
})()

複製代碼

設置了默認值以後，創建一個名爲fangtu的存儲空間，內有username: 'xbd'：

看看vuex的構造：

import Vue from 'vue'
import Vuex from 'vuex'
import localforage from 'localforage'

Vue.use(Vuex)

// 放出一個自執行的async函數
export default (async function () {
  // 等待localforage取值
  const username = await localforage.getItem('username')
  return new Vuex.Store({
    state: {
      username
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
  })
})()

複製代碼

後續刪除了main.js中我存儲的默認值以後，看看可否正常拿到

<template>
  <div id="app">
    {{ username }}
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['username'])
  }
}
</script>

複製代碼

如圖，已經成功給vuex放入了默認值。

這樣一來，解決了碰到一些使用到路由鉤子驗證一些字段的時候，沒法對異步設置的值及時的完成驗證的一些尷尬。