localStorage
ブラウザを閉じても保持される。
ローカルに保存され、Cookieのように有効期限を持てないので、消すまでずっと残ってしまうので、Cookieを使うほうが多いかも。
sessionStorage
ブラウザを開いてる間は保持される。
閉じると消えるので、開いている間だけ保持したい場合に重宝する。
// 保存
// 書き方は違うが全部同じ意味
sessionStorage.key = 'value';
sessionStorage['key'] = 'value';
sessionStorage.setItem('key', 'value');
// 取得
sessionStorage.getItem('key');
// 削除
sessionStorage.removeItem('key');
// 全部消す
sessionStorage.clear();
確認方法
chromeのコンソールから、以下の場所で確認できます。
Application -> Storage -> Local Storage
Application -> Storage -> Session Storage
サンプル
$(function(){
// 取得して変数に入れる
var testItem = sessionStorage.getItem('testItemSet');
if ( testItem != 'true' ){//sessionStorageがない場合
sessionStorage.setItem('testItemSet', 'true');//sessionStorageに値を保存
$('#js-test-item').show();//sessionStorageがない場合の挙動など
} else {//sessionStorageがある場合
$('#js-test-item').hide();//sessionStorageがある場合の挙動など
}
});