📖

WebStorageについて

2023/01/24に公開約1,100字

Reactの開発で入力途中でページを離脱した場合、フォームの内容を復元するのにlocalStorageを使うことになりました。

WebStorageの仕組みについてあまり知らなかったので調べてみました。

WebStorageについて

ブラウザにキーと値のペアで保持する仕組み。

ブラウザによって使えない場合もある。
詳しくは以下を参照。(最新のブラウザであれば問題なし)
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API#ブラウザーの互換性

WebStorageの違い

WebStorageには以下の2種類がある。

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があらゆるところで使われていて、どのタイミングで設定されて、どのタイミングでデータが削除されるのかが分かりづらく下手に使うとバグを生む原因になりそうだなと思いました。

そのため、使うとしても局所的に使うのがよいと思いました。

最後まで読んでいただきありがとうございました!

参考

https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage

Discussion

ログインするとコメントできます