■ サンプル
チェックボックスのデータをインスタンス化し、保存する<!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>
