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