ローカルストレージとセッションストレージの違いは？
解説
Web Storageにはローカルストレージとセッションストレージの二種類の保存領域があり、目的に合わせて使い分ける必要があります。
どちらも格納方式は辞書のような項目名（キー）付きの方式（Key-Value Store）で、標準ではデータ保持単位ごとに5メガバイトが用意されます。（上限はブラウザの実装によって異なります）
ローカルストレージ
ローカルストレージはオリジン（origin 生成元）と呼ばれる単位でデータを保存し、タブやウィンドウ、ブラウザが閉じられても永続し、次に参照されたときも、同じ内容を保持しています。
ローカルストレージにアクセスするにはwindowオブジェクトのlocalStorage属性から参照する、WindowLocalStorageオブジェクトを利用します。
保存の単位となるオリジンは、スキーム（urlの「http://」の部分）、ドメイン（urlの「www.example.com」の部分）、ポート（urlの「:8080」の部分）を合わせたものです。
たとえば、
http://www.example.com:8080/path/a/b/c.html
http://www.example.com:8080/path/d.html
の二つのドキュメントは、urlの「http://www.example.com:8080」の部分が同じなので、オリジンが同じになります。
オリジンが同じであれば、ドキュメントやタブ、ウィンドウが異なっても、同一のローカルストレージが参照先となります。
セッションストレージ
セッションストレージは、セッションを単位としてデータを保存し、セッションの開始とともに生成され、終了とともに消去されます。
セッションストレージにアクセスするにはwindowオブジェクトのsessionStorage属性から参照する、WindowSessionStorageオブジェクトを利用します。
セッションは、ウィンドウがタブに分かれていなければその特定のウィンドウが、タブに分かれていればそれぞれのタブが開始するとともに始まり、そのタブまたはウィンドウが閉じられると同時に終了します。
再読み込みやクラッシュからの復元の場合は、同じセッションが続いているものとみなされます。ただし、ブラウザのバージョンによってはセッションストレージの内容がクラッシュ時に復元されないことがあります。
同じドキュメントでも、タブやウィンドウが別であれば、それぞれ別のセッションとなります。
ただし、タブまたはウィンドウ内のフレームは、親のタブまたはウィンドウと同一のセッションに含まれ、フレーム内のドキュメントのオリジンが同じであれば親とセッションストレージを共有します。
タブまたはウィンドウから別のタブやウィンドウを開いた場合、開かれたタブやウィンドウで生成される新しいセッションストレージは、初期値として元のタブまたはウィンドウのセッションストレージの内容をコピーし、以後は同期しません。
セキュリティ
ローカルストレージとセッションストレージのどちらの場合も、オリジンの同じドキュメント同士でなければ、互いにアクセスすることはできません。
ローカルストレージの場合は、オリジンの同じページの間でデータが共有され、明示的に削除しなければデータが蓄積されていくため、問題を避けるためには、データ項目のキーがページをまたいで一意になるようにする、不要になったデータ項目は都度に削除する、といった配慮が必要になります。
レンタルサーバーなどのように、オリジンが同じで、ファイル階層ごとにドキュメントの設置者や管理者が異なるケースでは、意図しない相手がデータにアクセスできてしまうため、十分な配慮が必要です。
関連項目
