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