Vue.jsでinstallを使用して期限付きのlocalStorageを使用する方法

Vue.jsでlocalStorageを期限付きで使用

Vue.jsでlocalStorageはlocalStorage.name = 'foo'のように指定するだけで使用できる

しかし、localStorageをCookieのように期限付きで使用したいこともある。

例えば1ヶ月は保存されるがその後は自動消去されるような使い方だ。

それにはinstallで期限付きのvue.prototype.$storageを登録してmethodsで利用する必要がある。

Vue.jsでlocalStorageを期限付きで作る方法

まずVueのinstallを使用して期限付きlocalStorageを作成する。

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)で読み込んでmethodsで使用するだけだ。

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'が
    // 設定されているので指定した日付以降は自動削除される。
  }
})

Vue.jsでinstallを使用して期限付きのlocalStorageを使用する方法

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