Reactでlocal strageを扱う

サンプルコード

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
constructor() {
super()

this.state = {
// ユーザー情報 [名前、画像、保持ポイント、獲得ポイント]
users: [
{name: "kazuki", img: "10.png", retention: 100, praise: 0},
...
],
userInfo: { send: 0, receive: 2 }
}
...
}
...

// 初回のみ実行
componentDidMount() {
if(localStorage.app){ // もし前回のデータがあったら、ローカルストレージの値を取得し、更新する
const saveDate = JSON.parse(localStorage.app);
this.setState({
users: saveDate.users,
userInfo: saveDate.userInfo
})
}
}

// stateが変更されたら実行
componentDidUpdate() {
// ローカルストレージにステートの情報を保存
localStorage.setItem('app', JSON.stringify(this.state));
}

説明

reactでは、stateでデータの状態を管理しますが、リロードをしてしまうと、データは消えてしまいます。
そのため、stateの情報をローカルに保持させたい場合は、local strageを使う必要があります。

上のサンプルコードでは、usersとuserInfoのstateをlocal strageに保存しています。
ポイントとしては、
保存するタイミングをデータが更新された後、
local strageのデータを取得し、stateに反映させるタイミングをアプリケーションが開かれた時
とすることです。

それらを実装するには、reactのライフサイクルメソッドを使います。
データが更新された時、つまりstate,propsの情報に変更が加わった時実行するのがcomponentDidUpdate()
アプリケーションが開かれた時、つまりrendorメソッドが呼び出された時実行するのがcomponentDidMount()
これらを使います。

そのほかに、local strageはjsonとして値を格納する必要があるので、stateのデータは以下のように書き換える必要があります。
値を受け取る時も同様です。

1
2
3
4
// 値を格納する時
JSON.stringify(this.state)
// 値を取り出す時
JSON.parse(localStorage.app)

今回はこれで以上です。

web