📖
WebStorageについて
Reactの開発で入力途中でページを離脱した場合、フォームの内容を復元するのにlocalStorageを使うことになりました。
WebStorageの仕組みについてあまり知らなかったので調べてみました。
WebStorageについて
ブラウザにキーと値のペアで保持する仕組み。
ブラウザによって使えない場合もある。
詳しくは以下を参照。（最新のブラウザであれば問題なし）
WebStorageの違い
WebStorageには以下の２種類がある。
sessionStorage
ブラウザに保持するがブラウザのセッションが終了するときに消去される。
そのため、タブやウィンドウを閉じると保持した値は消去される。
値の設定
sessionStorage.setItem('key', value)
値の取得
sessionStorage.getItem('key')
値の削除
sessionStorage.removeItem('key')
値の全削除
sessionStorage.clear
localStorage
ブラウザに保持するがsessionStorageと異なり、ブラウザなどから意図的に削除しない限りはローカルに保持し続ける。
値の設定
localStorage.setItem('key', value)
値の取得
localStorage.getItem('key')
値の削除
localStorage.removeItem('key')
値の全削除
localStorage.clear
おわりに
既存の実装でlocalStorageがあらゆるところで使われていて、どのタイミングで設定されて、どのタイミングでデータが削除されるのかが分かりづらく下手に使うとバグを生む原因になりそうだなと思いました。
そのため、使うとしても局所的に使うのがよいと思いました。
最後まで読んでいただきありがとうございました！
参考
Discussion