ブラウザにデータを保存する方法
2018.06.26 Posted by Coding_team
こんにちは、ウェブラボ技術メモです。
最近、Cookie以外でブラウザにデータを保存する方法がないか調べたところ、
便利なAPIを見つけたのでご紹介します。
localStorageとSessionStorage
localStorageとSessionStorageは、HTML5で新たに追加されたAPIです。
フロンエンドでブラウザにデータを保存することができるので、データベースとの連携が必要ありません。
下の表は、localStorageとSessionStorage、Cookieの特徴をそれぞれまとめました。
| 有効期限 | データ量 | 通信 | |
|---|---|---|---|
| localStorage | 半永久 | 5MB | なし |
| sessionStorage | ウィンドウ・タブを閉じるまで | 5MB | なし |
| Cookie | 指定期限まで | 4KB | リクエストの都度発生する |
また、ブラウザの対応状況や詳しい仕様は以下参考サイトをご覧ください。
localStorageとSessionStorageの使い方
主な動作は
- 保存
- 取得
- 削除
- 初期化
に分類されます。それぞれ以下記述をすると実行されます。
| localStorage | SessionStorage | |
|---|---|---|
| 保存 | localStorage.setItem(‘hogehoge’, ‘値’); | sessionStorage.setItem(‘hogehoge’, ‘値’); |
| 取得 | localStorage.getItem(‘hogehoge’) | sessionStorge.getItem(‘hogehoge’) |
| 削除 | localStorage.removeItem(‘hogehoge’) | sessionStorge.removeItem(‘hogehoge’) |
| 初期化 | localStorage.clear() | sessionStorage.clear() |
保存したデータは、デベロッパーツールの「Application」→「Storage」の中のそれぞれ「LocalStorage」と「SessionStorage」を開くと値が入っているか確認できます。
複数のデータ(配列)を保存したい場合はJSONに変換すると扱うことができます。
使用例
localStorageの利用例としては、「最近閲覧した商品」のおすすめや、「お気に入り」、「メモ機能」などがあるそうです。また、SessionStorageの場合は、使い捨てデータの受け渡しに使えそうですね。
実際にlocalStorageとSessionStorageを使ったデモを作成しました。
以上、技術メモでした。
関連記事こちらの記事も合わせてどうぞ。
