【JavaScript】SessionStorageとLocalStorageの違いと使い方

js
SessionStorageとLocalStorageの違いとそれぞれの使い方を紹介します。
こちらHTML5から使えるようになりました。実際使ってみるとCookieよりも使い勝手がよいと思います。

[スポンサーリンク]

もくじ

SessionStorageとLocalStorageの違い
SessionStorageの使い方
LocalStorageの使い方

SessionStorageとLocalStorageの違い

SessionStorageへ持っている値は、ウィンドウを閉じるまで有効となります。また別タブや別ウィンドウ間での共有はしていません。

LocalStorageへ持っている値は、ウィンドウを閉じたあとでも有効となっています。Cookieのように有効期限はありません。別タブや別ウィンドウ間での共有はできます。(Cookieに似ている動きです。)

以下のサンプルソースで、SessionStorageとLocalStorageをそれぞれ動かすことが出来るので、こちらで実際に2窓開いたりして動きを確認してみてください。

SessionStorageの使い方

こちらはHTMLソースです。

<p>sessionStorageの使い方</p>
<input type="button" onClick="set()" value="sessionStorageに値をセットする。">
<input type="button" onClick="display()" value="sessionStorageを表示する。">
<input type="button" onClick="del()" value="sessionStorageに値を削除する。">

こちらがJavaScriptソースです。
sessionStorageへ値をセット・表示・削除しています。

function set(){
	var storage = sessionStorage;
	storage.setItem('test', 'AAA');
	alert("testというキーに、”AAA”をセットしました。");
}
function display(){
	var storage = sessionStorage;
	var val = storage.getItem('test');
	alert("testキーの値は " + val + " です。");
}
function del(){
	var storage = sessionStorage;
	storage.clear();
	alert("削除しました。");
}

こちらのサンプルの「値をセット」ボタンを押した後に、別窓でこのページを開いて「値を表示」ボタンを押してみて下さい。
結果は別窓で開いたページのは値がNullになっているはずです。

See the Pen sessionStorage by morinkey (@morinkey) on CodePen.

LocalStorageの使い方

こちらはHTMLソースです。

<p>LocalStorageの使い方</p>
<input type="button" onClick="set()" value="LocalStorageに値をセットする。">
<input type="button" onClick="display()" value="LocalStorageを表示する。">
<input type="button" onClick="del()" value="LocalStorageに値を削除する。">

こちらがJavaScriptソースです。
localStorageへ値をセット・表示・削除しています。

function set(){
	var storage = localStorage;
	storage.setItem('test', 'AAA');
	alert("testというキーに、”AAA”をセットしました。");
}
function display(){
	var storage = localStorage;
	var val = storage.getItem('test');
	alert("testキーの値は " + val + " です。");
}
function del(){
	var storage = localStorage;
	storage.clear();
	alert("削除しました。");
}

こちらのサンプルの「値をセット」ボタンを押した後に、別窓でこのページを開いて「値を表示」ボタンを押してみて下さい。
結果は別窓で開いたページのは値がAAAになっているはずです。

See the Pen localStorage by morinkey (@morinkey) on CodePen.

さいごに

実のところ、LocalStorageよりもSessionStorageを重宝しています。

フォームの値とかはLocalStorageへセットするとことで、戻るボタン問題も2窓問題も解決できるので私は多用しています。

LocalStorageは実のところCookieとあまり動作が変わらないので、そこまでは使っていません。(大きなデータになりそうな時くらいですが、そもそもそんなに大きなデータをブラウザのストレージには入れないのでやはり使用頻度は低いです。)

ただどちらも便利なわざなので積極的に使うことをオススメします!

それでは!