Vue引入使用localforage改进本地离线存储方式(突破5M限制)

npm i localforage

// 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:{
    // 保存数据
    forageSetVal(){
      const userList = [
        {
          name:'张三',
          city:'北京',
        },{
          name:'李四',
          city:'南京',
        },{
          name:'王五',
          city:'深圳',
        }
      ]
      /*
      * setItem(key, value, successCallback)
      * 将数据保存到离线仓库。
      */
      this.$forage.setItem('userList', userList).then((val) => {
        console.log('setItem',val)
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取数据
    forageGetVal(){
      /*
      * getItem(key, successCallback)
      * 从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。
      * 当存储 undefined 时， getItem() 也会返回 null。由于 localStorage 限制，同时出于兼容性的原因 localForage 无法存储 undefined。
      */
      this.$forage.getItem('userList').then((val) => {
        console.log('getItem',val)
        this.userInfos = val;
      }).catch(err => {
        console.log(err)
      });
    },
    // 从离线仓库中删除 key 对应的值
    forageRemoveVal(){
      /*
      * removeItem(key, successCallback)
      * 从离线仓库中删除 key 对应的值。
      */
      this.$forage.removeItem('userList').then(() => {
        console.log('removeItem');
      }).catch(function(err) {
        console.log(err);
      });
    },
  },
};
</script>