Vue.js 期限付きlocalStorageサンプル

ConsoleやApplicationのLocal Storageで確認可能。

const localStorageLimit = {
  install(Vue) {
    Vue.prototype.$storage = {
      set(key, value, expire) {
        let data
        if (expire !== undefined) {
          data = {
            expire: expire,
            value: value
          }
        } else {
          data = value
        }
        localStorage.setItem(key, JSON.stringify(data))
      },
      get(key) {
        let s = localStorage[key]
        if (s === undefined) return
        s = JSON.parse(s)
        if (new Date(s.expire) > new Date()) {
          return s.value
        } else {
          localStorage.removeItem(key)
          return undefined
        }
      }
    }
  }
}
Vue.use(localStorageLimit)

new Vue({
  el: '#app',
  methods: {
    setLocalStorage(key, value, expire) {
      this.$storage.set(key, value, expire)
    },
    getLocalStorage(key) {
      return this.$storage.get(key)
    }
  },
  mounted() {
    const data = {
      name: 'sato',
      age: 32
    }
    this.setLocalStorage('test', data, '2050/01/01 00:00')
    console.log(this.getLocalStorage('test'))
    // => {name: "sato", age: 32}
    // consoleには表示されないが'2050/01/01 00:00'が
    // 設定されているので指定した日付以降は自動削除される。
  }
})

元記事を表示する