vue中使用web缓存机制

2019/12/17 vue

1,安装web缓存库

npm i –save web-storage-cache

2,在utils文件夹中新建localStorage.js

3,引入web-storage-cache

import Storage from 'web-storage-cache'

const localStorage = new Storage()

export function getLocalStorage(key) {
  return localStorage.get(key)
}

export function setLocalStorage(key, value, expire = 30 * 24 * 3600) {
  return localStorage.set(key, value, { exp: expire })
}

export function removeLocalStorage(key) {
  return localStorage.delete(key)
}

export function clearLocalStorage() {
  return localStorage.clear()
}

export function getTheme(fileName) {
  return getBookObject(fileName, 'theme')
}

export function saveTheme(fileName, theme) {
  setBookObject(fileName, 'theme', theme)
}

export function getFontSize(fileName) {
  return getBookObject(fileName, 'fontSize')
}

export function saveFontSize(fileName, fontSize) {
  setBookObject(fileName, 'fontSize', fontSize)
}

export function getBookObject(fileName, key) {
  if (getLocalStorage(`${fileName}-info`)) {
    return getLocalStorage(`${fileName}-info`)[key]
  } else {
    return null
  }
}

export function setBookObject(fileName, key, value) { // 相当于常见了一个book的缓存对象
  let book = {}
  if (getLocalStorage(`${fileName}-info`)) {
    book = getLocalStorage(`${fileName}-info`)
  }
  book[key] = value
  setLocalStorage(`${fileName}-info`, book)
}

2,在vue组件中使用缓存机制

 import { ebookMixin } from '../../utils/mixin'
import {FONT_SIZE_LIST} from '../../utils/book'
import { saveFontSize } from '../../utils/localStorage'
  export default {
    mixins: [ebookMixin],
    data() {
      return {
        fontSizeList:FONT_SIZE_LIST
      }
    },
    methods: {
        setFontSize(fontSize){       
            saveFontSize(this.fileName, fontSize)     // 调用缓存机制,缓存当前字体,页面刷新数据也不会消失 
        },
        showFontFamilyPopup(){
            this.setFontFamilyVisible(true)
        }
    }
  }
</script>

Search

    Table of Contents