首先按照国际惯例,无中生个友
这位朋友最近遇到了点头疼的问题,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放入了默认值。
这样一来,解决了碰到一些使用到路由钩子验证一些字段的时候,无法对异步设置的值及时的完成验证的一些尴尬。