JavaScript Web Storage完全比較：localStorageとsessionStorageの違いと使い分け

JavaScriptでクライアント側にデータを保存する方法として、 localStorageとsessionStorageは非常に便利なAPIです。しかし、保存期間やスコープ、セキュリティの観点で両者には明確な違いがあります。
このページでは、それぞれの特徴と使い分け方を、実用的なコード例とともにわかりやすく解説します。

ローカルストレージやセッションストレージを使うと、Javascriptからブラウザ（が管理するディスク領域）にデータを保存することが出来ます。
入力値や計算結果等を保存して、あとから取り出すような用途に使用できます。
クッキーより大きなサイズのデータを保存できますが、サーバーには送信しません。必要ならcookieやgetやpostやajaxなどで送信しましょう。
ローカルストレージとセッションストレージの保存場所は別々ですので、同じ[key]でデータを保存しても別々に保存されますので、同時に使用しながら使い分けることが出来ます。

■Window.localStorage(ローカルストレージ)

保存されたデータには保持期間の制限はありません。

データの保存

localStorage.setItem('key', 'value');

保存データの取得

var valueLocal = localStorage.getItem('key');

保存データの削除

localStorage.removeItem('key');

■Window.sessionStorage(セッションストレージ)

保存されたデータはページのセッションが終了する（ブラウザタブが閉じられた）ときに消去されます。

データの保存

sessionStorage.setItem('key', 'value');

保存データの取得

var valueSession = sessionStorage.getItem('key');

保存データの削除

sessionStorage.removeItem('key');