Web Storageの使い方

• データの登録 localStorageとsessionStorageのいずれもwindow以下に同名のオブジェクトが用意されている。データの参照やデータの削除も同様である。

      // localStorageへのデータの登録
      window.localStorage.setItem('foo', 'bar');
  
      // sessonStorageへのデータの登録
      window.sessionStorage.setItem('foo', 'bar');

  上記は、”foo”をキーに”bar”というデータを登録する例である。行頭の「window」は省略できる。またsetItem()メソッドを含む次のような3種類の記述ができる。

      // localStorageへのデータの登録
      localStorage.setItem('foo', 'bar');
  
      // 配列のようにlocalStorageへデータを登録する
      localStorage['foo'] = 'bar';
  
      // プロパティのようにlocalStorageへデータを登録する
      localStorage.foo = 'bar';

• データの参照 データの参照には、getItem()メソッドを使う。次のサンプルはすでに「foo」というキーに「bar」というデータが登録されているものとする。

      // データの参照
      localStorage.getItem('foo'); // "bar"
  
      // 配列のようにデータを参照する
      localStorage['foo']; // "bar"
  
      // プロパティのようにデータを参照する
      localStorage.foo; // "bar

  指定したキーが存在しない場合、getItem()はnullを返し、そのほかはundefinedを返す。

• データの削除 データの削除は、個別のデータを削除する場合には、removeItem()メソッドを使用し、すべてのデータを削除する場合には、clear()メソッドを使う。

      // データの削除
      localStorage.removeItem('foo');
  
      // すべてのデータを削除する
      localStorage.clear();

• データの一覧 登録されているデータの一覧を取得したい場合は、メソッドやプロパティを組み合わせる形となる。

      // データ数でループを回す
      for ( var i = 0, len = localStorage.length; i < len; i++ ) {
  
        // キーを取得する
        var key = localStorage.key(i);
  
        // 取得したキーを利用してデータを参照する
        var value = localStorage.getItem(key);
        console.log(key, value);
      }

• API一覧 localStorage／sessionStorageのAPI一覧
  

  メソッド・プロパティ	説明
  setItem(key,value)	keyに紐付くvalueを登録する
  getItem(key)	keyに紐付くデータを取得する
  removeItem(key)	keyに紐付くデータを削除する
  clear()	すべてのデータを削除する
  length	データの数を取得する
  key(n)	n番目のキーを取得する