这样写离线存储,老板娘再也没让我加过班 。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完成。以常见的在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放入了默认值。

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

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章