Storageについてまとめてみました。Storage)とはGettyImagesお気に入り詳細を見るHTML5から登場した機能でホームページで扱うデータを保存しておく場所のことです。ローカルストレージ(localStrage)やセッションストレージ(sessionStrage)と2種類あり、データの保存・上書き・削除・全クリアなどの操作は、JavaScriptというプログラム言語で行うことができ、Cookieやセッションの代わりになることを期待されている新しい機能のことです。Storageとは探して追加|アップロードお気に入り詳細を見るローカルストレージ(localStrage)とはユーザーのローカル(ブラウザ)にデータを保存することができ、半永久的にデータを保存することができる機能。データの読み込み・更新も比較的簡単に行うことができる。探して追加|アップロードお気に入り詳細を見るセッションストレージ(sessionStrage)とはユーザーのローカル(ブラウザ)にデータを保存することができ、一時的にデータを保存することができる機能。作業途中のデータや画面遷移時の一時的なデータ保存などに有効活用できます。ローカルストレージ(localStrage)との違いはデータの有効期限に違いがある。探して追加|アップロードお気に入り詳細を見るクッキー(Cookie)とローカルストレージの違いGettyImagesお気に入り詳細を見る【通信量の違い】Cookieはリクエストを投げるたびにCookieの内容をすべてサーバーに送信しているため、トラフィックが増大する。そのため、Cookieに保存するデータ量が多くなればなるほど、サイトが重くなったりするなどの弊害がある。ローカルストレージは、ローカル内だけで完結するため、余計なトラフィックが増えない。お気に入り詳細を見る【セキュリティの向上】Cookieはローカルで保存しておくべきデータでもリクエストのたびに送信しているため、ネットワークの経路上でデータが漏洩する可能性があった。localStorage/sessionStorageに保存されているキーの数を返す。indexを数値で指定。index値に対応するキー(文字列)を返す。keyに対応する値を返す。keyに対し、valueをセットする。valueとしてオブジェクトも含め任意の値を指定できることになっているが、ブラウザ実装では、数値や文字列しか挿入できない。localStorage/sessionStorageに保存されているデータをすべて消去する。keyに対応する値を削除する。Store)型のデータベースを操作するAPIである。キーと値のペアでデータを管理する。hogeをキーとして、値testを保存する場合は、以下のように記述する。