ウェブストレージ

（Web API）
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

ローカルストレージ

HTHL5から導入されたWEB APIの一種で、Javascriptでブラウザにデータを記録する仕組み。
cookieのようにWEBサーバーにデータを保存するのではなくブラウザに保存するため、ブラウザを閉じてもユーザーの入力情報などを保持し続けることができる（主要なブラウザなら5MBまでデータを保存できる）。
また、他のタブ間でもデータが共有されるため、あるタブで保存されたデータは即座に違うタブで参照できる。ページを更新してもデータが残っている。

注意点として、こちら側でローカルストレージのデータを削除する処理を書かないと、データは永続的に残り続けるため、必ず削除する処理を書くこと。加えてJavascriptから自由にアクセスできるため、セキュリティ上危険をはらんでいる。ユーザーの個人情報など、機密性の高い情報には使わないようにすること（データは平文（暗号化されていない形式）で保存される）。

保存

localStorage.setItem('key', 'value')
// あるいはlocalStorage.key = 'value'と書くだけで保存できる。
localStrage.setItem('foo','fafa');
localStrage.key = 'fafa';

取得

localStorage.getItem('Key')
// あるいはlocalStorage.keyでvalueを取得することができる。
var value1 =localStrage.getItem('foo');
var value2 = localStorage.key;

削除

localStorage.removeItem('foo'); // 指定したキーのデータを削除
localStorage.clear(); // すべてのデータを削除

セッションストレージ

セッションストレージは文字通り「セッションのストレージ（データ記憶領域）」であるが、そもそもセッションとは『Webサイトにアクセスされてからアクセス終了までの一連の通信』のことを指す。なのでサイト内で別のページに遷移してもそれは同じセッションと見なされる（※異なるタブは異なるセッションストレージとなる）。ただし、ウインドウ（タブ）を閉じたり、同じページに長時間（一般的には30分以上）滞在しているとセッションが切れて、セッションストレージに保存したデータも消えてしまうので注意が必要である。

ウェブストレージの主な用途

• 表示に関する各種設定情報（e.g. お知らせ、通知表示の有無）
• ユーザーの操作やアクションに関する情報（e.g. お気に入り、閲覧したページ、商品）
• クライアント側の使用状況をまとめてサーバーに送信するための一時保管（e.g. エラーIDをまとめてログサーバーに送信）
• サーバーとのデータ不整合を防止するためのバージョン情報

一般的にはローカルストレージを利用するケースが多い。

ウェブストレージのデータ型

ウェブストレージのデータは文字列形式のみ保存でき、オブジェクト型では保存できない。そのため、JSON.stringify メソッドを使ってオブジェクトを JSON 形式の文字列に変換する方法がある。

各種ストレージの違い