2017/08/08

手軽にブラウザにデータを保存できるlocalStorageやsessionStorage





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がある場合の挙動など
  }

});