前言

在今天的實作中，我將專注在完成保存主題設置的功能。昨天已經完成當我按下保存按鈕後，設定會儲存在本地儲存中，但不會自動反映在待辦事項網頁上。今天我會進一步優化此功能，讓網頁在載入時能夠自動設定內容。

恢復主題設置

首先，我新增了一個名為 setSetting() 的方法，此方法的目的是當我重新開啟網頁時，網頁會從本地存儲中讀取已保存的主題和字體相關設定。這樣一來，我就不需要每次都手動設置主題和字體，可以直接使用上次設定的狀態。

setSetting() {
    let nowThemeJSON = localStorage.getItem("theme");
    let nowFontJSON = localStorage.getItem("font");
    let nowFontSizeJSON = localStorage.getItem("fontSize");

    // 將字符串轉回 JavaScript
    this.nowTheme = JSON.parse(nowThemeJSON);
    this.nowFont = JSON.parse(nowFontJSON);
    this.nowFontSize = JSON.parse(nowFontSizeJSON);

    this.setTheme(this.nowTheme);
    this.setFont(this.nowFont);
    this.setFontSize(this.nowFontSize);
}

接著，完成此方法後記得將 setSetting() 方法添加到建構子中，這樣當我重新載入網頁時，設定才會自動載入。

恢復主題設置預設值

接著，我希望提供一個選項讓使用者可以隨時恢復主題設置為預設值。我先在 HTML 中增加 "清除設定" 的選項：

<li id="ClearSettingButton">
      <span class="selectorStyle">清除設定</span>
</li>

接下來，我在 JavaScript 中獲取該元素，以便操作點擊事件：

this.ClearSettingButton = this.getElement("#ClearSettingButton");

然後，我創建一個 resetSetting() 方法，以實作將網頁主題設置恢復成預設值的功能。resetSetting() 方法不僅會恢復網頁的主題設置，還會將地方存儲的設置也更新為預設值。以下為resetSetting() 方法的程式碼：

resetSetting() {
    this.nowTheme = "default-theme";
    this.nowFont = "default-font";
    this.nowFontSize = "default-font-size";

    this.saveSetting();

    this.setTheme(this.nowTheme);
    this.setFont(this.nowFont);
    this.setFontSize(this.nowFontSize);
}

最後，我為 "清除設定" 選項添加了一個點擊事件，當事件被觸發時，就會執行 resetSetting() 方法。然而，為了避免不小心點擊到導致設定被清除，我在執行 resetSetting() 方法前添加一個確認的對話框。這樣一來，當使用者點擊 "清除設定" 選項時，就會顯示顯示對話框，只有在確認後才會執行 resetSetting() 方法：

this.ClearSettingButton.addEventListener("click", () => {
  const isConfirmed = confirm("您確定要清除設定嗎?");

  if (isConfirmed) this.resetSetting();
});