【JavaScript】Local Storage / Session Storage

Web Storage とは

Web Storage は、ブラウザが持つデータの保存領域のことで、Local Storage と Session Storage の 2 種類があります。 これらのデータはオリジン^※1ごとに分けて保存されます。

Cookie も同じくブラウザが持つデータですが、用途そのものが違います。 Cookie はサーバーとデータをやりとりする目的で使用されます。 設定にもよりますが、データやりとりはブラウザが自動でやるため、フロントエンド側で直接操作することはできません（しません）。

一方 Web Storage はブラウザのみで完結する仕組みです。 サーバーとは関係なく、ブラウザに保存したいデータがある場合に、JavaScript を用いて操作を行います。

以下は Local Storage、Session Storage、Cookie を比較したものになります。

Local Storage と Session Storage の大きな違いは有効期限とデータの共有です。

Local Storage のデータは意図的に削除しない限りは永続的に残ります。 また別のタブやウィンドウでもデータを参照することができます。

一方 Session Storage は、現在開いている画面（タブ）でのみ有効なデータとなります。 そのため例え同じサイトであっても、タブやウィンドウが違えばデータの内容は異なります。 またタブやウィンドウを閉じた時点で登録したデータは削除されます。

Web Storage はブラウザで確認することができます。 Google Chrome であれば、ディベロッパーツールの Application、Storage にあるので確認してみてください。

※1 　オリジンは、プロトコル、ホスト、ポートのセットのことで、すべて同じ場合に同一のオリジンとなります。

Web Storage の操作

Local Storage、Session Storage に関するオブジェクトは、以下のように参照することができます。

window.localStorage
window.sessionStorage

このオブジェクトのメソッドを使用することで、Web Storage の操作を行います。

登録

Web Storage への登録はsetItem()を使用します。 登録にはキーと値のセットを指定します。

window.localStorage.setItem('key', 'value')
window.sessionStorage.setItem('key', 'value')

取得

Web Storage から登録したデータを取得するには、getItem()を使用します。 取得の際にはキーを指定します。

window.localStorage.getItem('key')
window.sessionStorage.getItem('key')

1 件削除

Web Storage から任意のデータを削除するには、removeItem()を使用します。 削除の際にはキーを指定します。

window.localStorage.removeItem('key')
window.sessionStorage.removeItem('key')

全削除

Web Storage からすべてのデータを削除するには、clear()を使用します。

window.localStorage.clear()
window.sessionStorage.clear()

注意点

SPA の開発などで、Web Storage を利用することもあるかと思います。 しかし、以下のサイトに記載されているような注意が必要です。

参考：HTML5 の Local Storage を使ってはいけない（翻訳）

かなり要約すると、Web Storage は JavaScript によって操作できるため、XSS などによって情報が漏洩するかもしれないからログインなどの機密情報を保存するのは良くない、といった内容です。

ではどのようにすればよいのか、という話は記事の本筋とは異なるためやめておきます。