改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までその16

Chapter 7 クライアントサイド JavaScript 開発を極める

ローカルストレージ

var storage = localStorage;
storage.setItem("apple", "リンゴ")
storage.orange = "オレンジ";
console.log(storage.getItem("apple"));
console.log(storage.orange);

// 削除
storage.removeItem("apple");

オブジェクトを保存

復元可能な文字列として保存します。

var storage = localStorage;
var apple = {name: "青りんご", price: "100"};
storage.setItem("apple", JSON.stringify(apple));
var data = JSON.parse(storage.getItem("apple"));
console.log(data.name);

storage クラス

クラスを定義して利便性を上げます。

class MyStorage {
  constructor(storageName) {
    this.storageName = storageName;
    this.storage = localStorage;
    this.data = JSON.parse(this.storage[this.storageName] || "{}");
  }

  getItem(key) {
    return this.data[key];
  }

  setItem(key, value) {
    this.data[key] = value;
  }

  save() {
    this.storage[this.storageName] = JSON.stringify(this.data);
  }
}

var storage = new MyStorage("sample");
storage.setItem("apple", "リンゴ")
console.log(storage.getItem("apple"));
storage.save();