这样写离线存储，老板娘再也没让我加过班。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放入了默认值。

这样一来，解决了碰到一些使用到路由钩子验证一些字段的时候，无法对异步设置的值及时的完成验证的一些尴尬。

这样写离线存储，老板娘再也没让我加过班 。localForage的使用

这样写离线存储，老板娘再也没让我加过班。localForage的使用