设置log缓存_吐血整理写前端缓存的技巧（你值得拥有）

看到标题，你可能被吸引住了，前端缓存不就是 localStorage, sessionStroage, cookie indexDB 等几大缓存大招吗？嗯，但是呢，今天我们不讲这几个东西，这几个东西都被人讲烂掉了，今天重点介绍一个 叫做 vue2-storage 的缓存 vue 插件，你说气人不，竟然不是，理直气还壮

算了，算了，打我就算了，我就偶尔装装逼，不至于，我们程序员还是挺温柔的，不会大打出手，顶多就像代码下毒，删除跑路的那种，哈哈哈，接下来让我们一起来研究下这个插件的使用，以及封装吧

先附上此插件的链接文档吧

Introduction · GitBook​yarkovaleksei.github.io

1.安装

npm install vue2-storage
yarn add vue2-storage

2. 使用

import Vue from 'vue'
import {Vue2Storage} from 'vue2-storage'

Vue.use(Vue2Storage)
// You can pass options
Vue.use(Vue2Storage, {
  prefix: 'app_',
  driver: 'local',
  ttl: 60 * 60 * 24 * 1000 // 24 hours
})

3. JavaScript

// If using a module system (e.g. via vue-cli), import Vue and Vue2Storage and then call Vue.use(Vue2Storage).
import Vue from 'vue'
import {Vue2Storage} from 'vue2-storage'

// You can specify the plug-in configuration when connecting, passing the second object to Vue.use
Vue.use(Vue2Storage, {
  prefix: 'app_',
  driver: 'local',
  ttl: 60 * 60 * 24 * 1000 // 24 hours
})

// Now the app has started!
new Vue({
  el: '#app',
  created () {
    // The configuration of the plugin can be changed at any time.
    // Just call the setOptions method and pass the object with the settings to it.
    this.$storage.setOptions({
      prefix: 'app_',
      driver: 'local',
      ttl: 60 * 60 * 24 * 1000 // 24 hours
    })
  }
}).$mount('#app')

4. Options

prefix-将添加到键的开头以避免冲突的字符串。默认值为app_。

driver-使用的存储的标识符。虽然支持值local，session和memory（分别为localStorage，sessionStorage和memoryStorage）。默认值为local。

ttl-记录生命周期（以毫秒为单位）。默认值为0 // disables the lifetime and the record will be kept forever。

5. setOptions 复写插件里面默认的一些设置

export default {
  created () {
    this.$storage.setOptions({
      prefix: 'app_',
      driver: 'local',
      ttl: 60 * 60 * 24 * 1000 // 24 hours
    })
  }
}

6. get 方法

export default {
  created () {
    this.$storage.set('test', { key: 'value' }, { ttl: 60 * 1000 })
    const data = this.$storage.get('test')
    const fallback = this.$storage.get('unknown', 'fallback') // Not in storage
    console.log(data) // { key: 'value' }
    console.log(fallback) // "fallback"
  }
}

7. pull 方法

该方法允许您使用字符串键检索值并将其从存储库中删除

export default {
  created () {
    this.$storage.set('test', { key: 'value' }, { ttl: 60 * 1000 })
    const data = this.$storage.pull('test')
    const fallback = this.$storage.get('test', 'fallback') // Not in storage anymore
    console.log(data) // { key: 'value' }
    console.log(fallback) // "fallback"
  }
}

8. set 方法

该方法允许您通过指定字符串键和生存期将值写入存储中

export default {
  created () {
    this.$storage.set('test', { key: 'value' }, { ttl: 60 * 1000 })
    const data = this.$storage.get('test')
    console.log(data) // { key: 'value' }
  }
}

9. remember

该方法允许您检索项目。如果给定键已经存在，它将立即返回其值。否则，传递的函数将被执行并将其返回值保存在存储中，然后再返回

export default {
  async created () {
    const data = await this.$storage.remember('test', async () => {
        // Do HTTP calls or other async stuff
        return 'value'
    })
    console.log(data) // outputs "value"
  }
}

10. remove

该方法允许您使用字符串键从存储库中删除值

export default {
  created () {
    this.$storage.set('test', { key: 'value' }, { ttl: 60 * 1000 })
    this.$storage.remove('test')
    const data = this.$storage.get('test')
    console.log(data) // null
  }
}

11. clear

该方法允许您清除存储库。如果传递参数force值为true，则将清除整个存储。否则，只会删除其键以设置中指定的前缀开头的值

export default {
  created () {
    this.$storage.set('test', { key: 'value' }, { ttl: 60 * 1000 })
    this.$storage.clear()
    const data = this.$storage.get('test')
    console.log(data) // null
  }
}

12. has

该方法允许您找出存储库中是否存在具有指定键的条目

export default {
  created () {
    this.$storage.set('test', { key: 'value' }, { ttl: 60 * 1000 })
    const hasTest = this.$storage.has('test')
    const hasLol = this.$storage.has('lol')
    console.log(hasTest) // true
    console.log(hasLol) // false
  }
}

13. key

该方法从数字键索引返回一个值

export default {
  created () {
    this.$storage.set('test', 'value')
    const key = this.$storage.key(0)
    console.log(key) // 'value'
  }
}

14. keys

该方法返回一个存储键数组

export default {
  created () {
    this.$storage.set('test', { key: 'value' }, { ttl: 60 * 1000 })
    this.$storage.set('lol', { key: 'value' }, { ttl: 60 * 1000 })
    const keys = this.$storage.keys()
    console.log(keys) // ['test', 'lol']
  }
}

15. length

export default {
  created () {
    this.$storage.set('test', { key: 'value' })
    this.$storage.set('lol', { key: 'value' })
    console.log(this.$storage.length) // 2
  }
}

16. prefix

export default {
  created () {
    this.$storage.setOptions({
      prefix: 'app_',
      driver: 'local',
      ttl: 60 * 60 * 24 * 1000 // 24 hours
    })
    console.log(this.$storage.prefix) // app_
  }
}

我们封装了 一个 storageUtils.js

import Vue from 'vue'
import Vue2Storage from 'vue2-storage'

/**
 * 以下的options指模式参数：包含下列属性：
 * prefix ： a string that will be added to the beginning of the key to avoid collisions. Default is an app_.
 * driver ： the identifier of the storage used. While values are supported local, session and memory (localStorage, sessionStorage and * memoryStorage respectively). Default is an local.
 * ttl ： record lifetime in seconds. Default is an 60 * 60 * 24 * 1000 // 24 hours.
 *
 * 注意:
 *      1.有前缀的概念(prefix),该js中的所有方法都是针对这个前缀下的key操作
 *      2.方法带有 P 后缀的代表permanent模式操作、 S 后缀的代表session模式操作、 不带后缀的代表默认模式操作（即defaultOptions的对应值，如当前默认模式
 *        为local）
 *
 */
//当前options字段
let prefix = 'local_',
  driver = 'local',
  ttl = 1000 * 60 * 60 * 24 // 24 hours

//local模式：存在localStorage中的数据，会在每次新开浏览器时删除
const optionsL = {
  prefix: 'local_',
  driver: 'local',
  ttl: 1000 * 60 * 60 * 24, // 24 hours
}
//permanent模式：存在localStorage中的数据，不会在每次新开浏览器时删除
const optionsP = {
  prefix: 'permanent_',
  driver: 'local',
  ttl: 1000 * 60 * 60 * 24 * 10, // 24 hours
}
//session模式：存在sessionStorage中的数据
const optionsS = {
  prefix: 'session_',
  driver: 'session',
  ttl: 1000 * 60 * 60 * 24, // 24 hours
}
//TODO [xsw] 切换项目需修改???
//默认模式，当前设置为local模式,到小程序项目可能要切换session
const defaultOptions = optionsL

Vue.use(Vue2Storage, defaultOptions)
const storage = Vue.$storage
/**
 * 注意
 */
const storageUtil = {
  //默认模式操作，即local模式
  /**
   * 设置值到localStorage
   * @param {*} key
   * @param {*} value
   * @param {*} expires 有效时间（单位秒）,没有时间限制的话不传,默认setOptions中设置的ttl
   */
  set(key, value, expires = '', modelName) {
    let modelKey = modelName ? modelName + '_' + key : key
    if (!modelKey) {
      return
    }
    storage.remove(modelKey)
    if (expires) {
      storage.set(modelKey, value, expires)
    } else {
      storage.set(modelKey, value)
    }
  },
  /**
   * 获取localStorage中的值
   * 返回为null代表过期或是没有值
   * @param {*} key
   */
  get(key, defaultVal = '', modelName) {
    let modelKey = modelName ? modelName + '_' + key : key
    if (!modelKey) {
      return defaultVal
    }
    return storage.get(modelKey, defaultVal)
  },
  /**
   * 获取当前前缀下的所有key值
   * @param {*} isOnlyPrefix 是否只取当前前缀（prefix）的key?
   * return Array<string>
   */
  getKeys(isOnlyPrefix = true, modelName) {
    if (isOnlyPrefix) {
      let keys = storage.keys()
      return keys.filter(item => {
        return item.indexOf(prefix + modelName) == 0
      })
    } else {
      return storage.keys()
    }
  },
  /**
   * 指定key是否存在
   * @param {*} key
   */
  isExistKey(key, modelName) {
    let modelKey = modelName ? modelName + '_' + key : key
    return storage.has(modelKey)
  },
  /**
   * 清除指定key
   * @param {*} key
   */
  remove(key, modelName) {
    let modelKey = modelName ? modelName + '_' + key : key
    storage.remove(modelKey)
  },
  /**
   * 清除所有
   */
  clear() {
    storage.clear()
  },
  /**
   * 返回存储库中的键的数量
   * Return Number
   */
  size() {
    return storage.length()
  },

  //permanent模式操作
  setP(modelName, key, value, expires = '') {
    //storage模式设置为permanent
    this.setOptions(optionsP)
    this.set(modelName, key, value, expires)
    //storage模式设置回默认的local模式
    this.setOptions(defaultOptions)
  },
  getP(modelName, key, defaultVal = '') {
    //storage模式设置为permanent
    this.setOptions(optionsP)
    let val = this.get(modelName, key, defaultVal)
    //storage模式设置回默认的local模式
    this.setOptions(defaultOptions)
    return val
  },
  getKeysP(isOnlyPrefix = true, modelName) {
    this.setOptions(optionsP)
    let ksys = this.getKeys(isOnlyPrefix, modelName)
    this.setOptions(defaultOptions)
    return ksys
  },
  isExistKeyP(modelName, key) {
    this.setOptions(optionsP)
    let bool = storage.has(modelName, key)
    this.setOptions(defaultOptions)
    return bool
  },
  removeP(modelName, key) {
    this.setOptions(optionsP)
    storage.remove(modelName, key)
    this.setOptions(defaultOptions)
  },
  clearP() {
    this.setOptions(optionsP)
    storage.clear()
    this.setOptions(defaultOptions)
  },
  sizeP() {
    this.setOptions(optionsP)
    let length = storage.length()
    this.setOptions(defaultOptions)
    return length
  },

  //session模式操作
  setS(modelName, key, value, expires = '') {
    //storage模式设置为permanent
    this.setOptions(optionsS)
    this.set(modelName, key, value, expires)
    //storage模式设置回默认的local模式
    this.setOptions(defaultOptions)
  },
  getS(modelName, key, defaultVal = '') {
    //storage模式设置为permanent
    this.setOptions(optionsS)
    let val = this.get(modelName, key, defaultVal)
    //storage模式设置回默认的local模式
    this.setOptions(defaultOptions)
    return val
  },
  getKeysS(isOnlyPrefix, modelName) {
    this.setOptions(optionsS)
    let ksys = this.getKeys(isOnlyPrefix, modelName)
    this.setOptions(defaultOptions)
    return ksys
  },
  isExistKeyS(modelName, key) {
    this.setOptions(optionsS)
    let bool = storage.has(modelName, key)
    this.setOptions(defaultOptions)
    return bool
  },
  removeS(modelName, key) {
    this.setOptions(optionsS)
    storage.remove(modelName, key)
    this.setOptions(defaultOptions)
  },
  clearS() {
    this.setOptions(optionsS)
    storage.clear()
    this.setOptions(defaultOptions)
  },
  sizeS() {
    this.setOptions(optionsS)
    let length = storage.length()
    this.setOptions(defaultOptions)
    return length
  },

  /**
   * 设置storage的Options
   * @param {*} options
   */
  setOptions(options) {
    prefix = options.prefix
    driver = options.driver
    ttl = options.ttl
    storage.setOptions(options)
  },
}

export default storageUtil