【Vue.js】リストのデータを Local Storage で永続化する方法
Vue.js で Local Storage を使う場合 vue-ls というライブラリがあるのですが、ボタンクリックでリスト内のデータ追加、削除を行なうような場合にはその都度リストデータを Local Storage に保存してしまえば良いのではないかと思います。
環境
- Vue.js 2.5.9
処理
export default {
data() {
return {
items: [],
json: ''
}
},
mounted() {
this.items = JSON.parse(localStorage.getItem('items')) || [];
},
methods: {
addItem() {
this.items.push('item_' + this.items.length);
this.setItems();
},
deleteAllItems() {
this.items = [];
this.setItems();
},
setItems() {
localStorage.setItem('items', JSON.stringify(this.items));
}
}
}
mounted()
export default {
data() {
return {
items: [],
json: ''
}
},
mounted() {
this.items = JSON.parse(localStorage.getItem('items')) || [];
},
methods: {
addItem() {
this.items.push('item_' + this.items.length);
this.setItems();
},
deleteAllItems() {
this.items = [];
this.setItems();
},
setItems() {
localStorage.setItem('items', JSON.stringify(this.items));
}
}
}
mounted()
マウントしたときに Local Storage からデータを取得しています。このとき、Storage にデータが無ければ空の配列を代入しています。
もともと該当のプロパティは配列で初期化しているのでちょっと違和感のある処理ですが、 if でやると冗長になるかと思ってこれにしました。
setItems()
配列を JSON テキストにして Local Storage に保存しています。
データの変更を行ったときには必ず行う処理なのでメソッドにしておきました。
addItem(), deleteAllItems()
データの操作です。
配列を変更した後で配列を JSON 化、JSON テキストを Local Storage に登録しています。
Vue.js はリストを管理する系のアプリを作るのが簡単ですね。ページをリロードしてもデータが失われないようにすることで、結構いろいろなツールを作れそう。
Author And Source
この問題について(【Vue.js】リストのデータを Local Storage で永続化する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/shingorow/items/97c265d4cab33cb13b6c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .