概要
vue.jsでlocalStorageを扱うvue-local-storageモジュールの使い方(保存、削除、取得)について簡単に紹介。
https://github.com/pinguinjkeke/vue-local-storage
localStorageとは
Webブラウザ上でクライアントのデータを保存する仕組みのこと。
特徴
- 保存容量が5MB程度
- 保存期間は永久的
- データをkey-value形式で管理
参考
vue-local-storageのメリット
- お手軽
- vueモジュールとして扱える(コンポーネント単位に使用有無が管理できる)
- valueの型にObject,Array,String,Number,Booleanが使用できる
Version
| module | version |
|---|---|
| vue | 2.5.2 |
| vue-localstorage | 0.6.2 |
install
$ npm install vue-localstorage --save
使用方法
まず、プラグインの使用を宣言する。
main.js
import VueLocalStorage from 'vue-localstorage'
Vue.use(VueLocalStorage)
次に登録したいデータのkey-valueを設定する。
上記の宣言でlocalStorageプロパティが使用でき、typeプロパティで型が設定可能(省略も可能)。
defaultプロパティを使用することで、値が未設定時に登録するデフォルト値が設定可能。
localStorageオブジェクトのプロパティには設定したいkey名を設定する。
※ここでは説明のためわかりやすく○○Keyとしている。
new Vue({
localStorage: {
stringKey: {
type: String
},
numberKey: {
type: Number
},
booleanKey: {
type: Boolean
default: true
},
listKey: {
type: Array
},
objectKey: {
type: Object,
default: {
val: 'default'
}
},
noTypeKey: ''
}
})
データ保存
this.$localStorage.set(key,value)
データ削除
this.$localStorage.remove(key)
データ取得
this.$localStorage.get(key)
### サンプルソース
画面上のUIで簡単にlocalStorageへの登録、削除、取得を確認できるようしたもの。
取得結果を出力する際は登録後に画面を一度リロードしてください。
※UIの構成についてはガラクタ同然のため悪しからず。。。
| vue file | 概要 |
|---|---|
| LocalStorageEntry.vue | 保存用 |
| LocalStorageGet.vue | 出力用 |
localStorageの保存の確認にはGoogle Chromeのdebug consoleのApplicationタブでも確認できる。
LocalStorageEntry.vue
<template>
<div>
<p>
<label>
String：
<input type="text" v-model="stringType">
</label>
</p>
<p>
<label>
Number：
<input type="text" v-model="numberType">
</label>
</p>
<p>
<label>
Boolean：
<input type="radio" name="boolean" value="true" v-model="booleanType">
<label>True</label>
<input type="radio" name="boolean" value="false" v-model="booleanType">
<label>False</label>
</label>
</p>
<div>
<label>
List：
<div v-for="(item,i) in listType" :key="i">
<input type="text" v-model="listType[i]">
</div>
</label>
</div>
<p>
Object：
</p>
<p>
<label>
Name：
<input type="text" v-model="objectType.name">
</label>
<label>
Age：
<input type="number" v-model="objectType.age">
</label>
</p>
<div>
Sex：
<input type="radio" name="sex" value="0" v-model="objectType.sex">
<label>man</label>
<input type="radio" name="sex" value="1" v-model="objectType.sex">
<label>woman</label>
</div>
<p>
<button v-on:click="storeLocalStorage()">entry local storage</button>
<button v-on:click="deleteLocalStorage()">delete local storage</button>
</p>
</div>
</template>
<script>
export default {
name: 'LocalStorageView',
localStorage: {
stringKey: {
type: String
},
numberKey: {
type: Number
},
booleanKey: {
type: Boolean
},
listKey: {
type: Array
},
objectKey: {
type: Object
}
},
data: () => {
return {
stringType: 'Vue',
numberType: 10,
listType: [
'item1', 'item2', 'item3'
],
objectType: {
name: 'John',
age: 25,
sex: '0'
},
booleanType: true
}
},
methods: {
storeLocalStorage: function () {
this.$localStorage.set('stringKey', this.stringType)
this.$localStorage.set('numberKey', this.numberType)
this.$localStorage.set('booleanKey', this.booleanType)
this.$localStorage.set('listKey', this.listType)
this.$localStorage.set('objectKey', this.objectType)
},
deleteLocalStorage: function () {
this.$localStorage.remove('stringKey')
this.$localStorage.remove('numberKey')
this.$localStorage.remove('booleanKey')
this.$localStorage.remove('listKey')
this.$localStorage.remove('objectKey')
}
}
}
</script>
LocalStorageGet.vue
<template>
<div>
<div>
String：{{stringType}}
</div>
<div>
Number：{{numberType}}
</div>
<div>
Boolean：{{booleanType}}
</div>
<div>
List：
<li v-for="(item,i) in listType" :key="i">
{{item}}
</li>
</div>
<div>
Object：
<div v-if="Object.keys(objectType).length !== 0">
<div>
Name：{{objectType.name}}
</div>
<div>
Age：{{objectType.age}}
</div>
<div>
Sex:{{sex[objectType.sex]}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'LocalStorageGet',
data: () => {
return {
stringType: '',
numberType: 0,
listType: [],
objectType: {},
booleanType: false,
sex: ['man', 'woman']
}
},
mounted () {
this.stringType = this.$localStorage.get('stringKey', 'not entry')
this.numberType = this.$localStorage.get('numberKey')
this.listType = this.$localStorage.get('listKey')
this.objectType = this.$localStorage.get('objectKey')
this.booleanType = this.$localStorage.get('booleanKey')
}
}
</script>
その他
- localStorageオブジェクトで定義していないキーにsetした場合もエラーなく登録される
- typeで宣言した型と異なる型で登録した場合、自動で型変換される
- Vue.LocalStorage.get(key,default)でデフォルト値が使用できる。
感想
型宣言に対するエラー制御はしてないもののjavascript標準のlocalStorageではオブジェクトを登録する際にJSON.stringify()する手間があるため、オブジェクトごと登録できるのは便利。サーバーサイドのAPIが完成するまでの繋ぎに使えそう！