◾️はじめに

Web Storage に Class を保存し、ロードする

【１】サンプル

例１：チェックボックスのデータをインスタンス化し、保存する

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<head>
<body>
<span id="message">Hello</span>
<input id="saving-data-checkbox" type="checkbox" onchange="save();">
<label>Save data</label>
<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>
<script>
var key = "hello-world";

class Hello {
  constructor(enabledData) {
      this.enabledData = enabledData;
  }

  get isEnabledData() {
    return this.enabledData;
  }

  // ★ポイント★ ClassにJSONにするメソッドを用意
  toJson() {
    return {
      enabledData: this.enabledData
    };
  }
  
  static loadFromWebStorage(key) {
    // ローカルストレージの利用可否確認
    if(!localStorage) {
      console.log('ローカルストレージが使えないです');
      return null;
    }
    // ローカルストレージからデータを取り出し
    var loadingDataset = localStorage.getItem(key);
    if (!loadingDataset) {
      console.log('ローカルストレージ(Key [' + key + '])にデータが保存されていません');
      return null;
    }
    
    var json = JSON.parse(loadingDataset);
    return new Hello(json.enabledData);
  }
  
  saveToWebStorage(key) {
    if(!localStorage) {
      return;
    }

    // 一旦削除してクリアにする
    localStorage.removeItem(key);

    // Jsonとして保存
    localStorage.setItem(key, JSON.stringify(this.toJson()));
  }
}

$(function() {
  // ローカルストレージからデータを取り出し
  var hello = Hello.loadFromWebStorage(key);
  if (hello && hello.isEnabledData) {
    $('#saving-data-checkbox').prop('checked', true);
  } else {
    $('#saving-data-checkbox').prop('checked', false);
  }
});

function save() {
  var enabledData = $('#saving-data-checkbox').prop("checked");
  console.log("enabledData " + enabledData);
  var savingHello = new Hello(enabledData);
  savingHello.saveToWebStorage(key);
}
</script>
</body>
</html>