🌊
ブラウザにデータを保存する3つの方法
概要
ブラウザにデータを保存する3つの方法を簡単にまとめます。
ブラウザにデータを保存する3つの方法
① localStorage
- 永続的にデータを保存できる
- DevTools のアプリケーションタブで確認できる
② sessionStorage
- ブラウザやタブを閉じるまでの間データが保持できる
- DevTools のアプリケーションタブで確認できる
③ indexed Database
- 永続的にデータを保存できる
- DevTools のアプリケーションタブで確認できる
localStorage, sessionStorage, indexedDB の特徴
localStorage, sessionStorage, indexedDB の特徴をまとめる。
localStorage
- 記述量が少なくて済む
- 開発者のコード量が少なくて済む
- ログイン情報とかブラウザにデータ保存する場合に使用
- 同一オリジンポリシーにしたがっている
sessionStorage
- 記述量が少なくて済む
- 開発者のコード量が少なくて済む
- スクロール量とかフォームの入力値の保存に使用
indexedDB
- コードの記述量が増加する
- 開発者の学習量が増える
- localStorage, sessionStorageよりも容量が大きい
Discussion