山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版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();