はじめに
Vue.js プロジェクトに LocalForage を導入してみたので手順をメモしておきます。
環境
ライブラリインストール
1
| npm install localforage --save
|
初期設定
main.js に以下のコードを挿入する
1
2
3
4
5
6
7
8
9
10
|
import * as localforage from 'localforage'
const myLF = localforage.createInstance({
driver: localforage.LOCALSTORAGE,
name: 'MyLocal',
storeName: 'example',
version: 1
})
Vue.prototype.myLF = myLF
|
データの保存と取得
1
2
3
4
5
6
7
8
9
10
11
12
13
| methods: {
async init() {
await this.myLF.setItem("キー", [
"保存したい値",
"文字列や数値だけでなく",
"配列やオブジェクトも渡せる2"
]);
const test = await this.myLF.getItem("キー");
console.log("test: " + test);
}
}
|
vuex と併用する
そのままだと変更監視してくれないので vuex と併用して変更監視をさせてみました
変更するたびに update_completed を更新して update_completed の変更検知の中でデータを取り出してます
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| data() {
return {
test: []
};
},
computed: {
update_completed() {
return this.$store.state.update_completed;
}
},
watch: {
update_completed(newVal, oldVal) {
this.get_test();
}
},
methods: {
async set_test() {
await this.myLF.setItem("キー", [
"保存したい値",
"文字列や数値だけでなく",
"配列やオブジェクトも渡せる2"
]);
this.$store.commit("set_update_completed", update_completed);
},
async get_test() {
this.test = await this.myLF.getItem("キー");
console.log("this.test: " + this.test);
}
}
|
store.js に以下を追加
1
2
3
4
5
6
7
8
9
10
| export default new Vuex.Store({
state: {
update_completed: false
},
mutations: {
set_update_completed(state, update_completed) {
state.update_completed = !update_completed
}
}
})
|
参考
LocalForage を使ってアプリ内 DB を簡単構築
おわりに
以下の記事にあるように Local Storage は便利ですがあんまり使わない方が良さそうなので今後は localforage の方を使っていこうと思います
デフォルトで indexedDB です
HTML5 の Local Storage を使ってはいけない（翻訳）
以上です。