Javascript Chrome扩展：在页面重新加载时清除Chrome本地存储（不在更新时）

我正在开发一个Chrome扩展，它将对DOM结构进行排序。在扩展弹出窗口中，我使用一个按钮来激活/取消激活排序。为了保存我的按钮状态，我正在通过Chrome本地存储保存我按钮的“状态”：

function save_button_state() {
  var buttonStateText = $("#js-toggleSorting").html();
  var buttonStateAttribute = $("#js-toggleSorting").attr("data-click-state");
  var sortMessage = $(".message").html();
  chrome.storage.local.set(
    {
      buttonStateText: buttonStateText,
      buttonStateAttribute: buttonStateAttribute,
      sortMessage: sortMessage,
    },
    function () {
      console.log(
        `Saved State is: ${buttonStateText} and Saved Attribute is: ${buttonStateAttribute} and Saved Message is: ${sortMessage}`
      );
    }
  );
}

$(document).ready(() => {
  get_button_state();
  //Some Code to pass parameters from the extension to a content script
  $("#js-toggleSorting").on("click", function () {
    $(".message").html("");
    if ($(this).attr("data-click-state") == 1) {
      $(this).attr("data-click-state", 0);
      $(this).html("SORT INCOMING CHATS");
      $(".message").append("<p>STATUS: NOT SORTING CHATS</p>");
      sortFunction(false);
    } else {
      $(this).attr("data-click-state", 1);
      $(this).html("STOP SORTING INCOMING CHATS");
      $(".message").append("<p>STATUS: SORTING CHATS</p>");
      sortFunction(true);
    }
    save_button_state();
  });
});

保存dom节点并保留信息，以便在弹出窗口关闭时保存它。然后，为了从本地存储中获取该信息，我使用以下函数：

function get_button_state() {
  chrome.storage.local.get(
    ["buttonStateText", "buttonStateAttribute", "sortMessage"],
    function (data) {
      $(".message").html(data.sortMessage);
      $("#js-toggleSorting").html(data.buttonStateText);
      $("#js-toggleSorting").attr(
        "data-click-state",
        data.buttonStateAttribute
      );
      console.log(
        `Get State is ${data.buttonStateText} and Get Attribute is ${data.buttonStateAttribute}`
      );
    }
  );
}

当文档准备好后，我将处理按钮onclick事件，将dom从“排序”更改为“不排序”：

function save_button_state() {
  var buttonStateText = $("#js-toggleSorting").html();
  var buttonStateAttribute = $("#js-toggleSorting").attr("data-click-state");
  var sortMessage = $(".message").html();
  chrome.storage.local.set(
    {
      buttonStateText: buttonStateText,
      buttonStateAttribute: buttonStateAttribute,
      sortMessage: sortMessage,
    },
    function () {
      console.log(
        `Saved State is: ${buttonStateText} and Saved Attribute is: ${buttonStateAttribute} and Saved Message is: ${sortMessage}`
      );
    }
  );
}

$(document).ready(() => {
  get_button_state();
  //Some Code to pass parameters from the extension to a content script
  $("#js-toggleSorting").on("click", function () {
    $(".message").html("");
    if ($(this).attr("data-click-state") == 1) {
      $(this).attr("data-click-state", 0);
      $(this).html("SORT INCOMING CHATS");
      $(".message").append("<p>STATUS: NOT SORTING CHATS</p>");
      sortFunction(false);
    } else {
      $(this).attr("data-click-state", 1);
      $(this).html("STOP SORTING INCOMING CHATS");
      $(".message").append("<p>STATUS: SORTING CHATS</p>");
      sortFunction(true);
    }
    save_button_state();
  });
});

但显然，这不仅会在我重新加载页面时清除本地存储，而且会在页面中的某些更改导致弹出窗口出现大量错误行为时清除本地存储（基本上是在用户每次打开弹出窗口时交互/单击按钮时非常随机地更改按钮文本）。我的问题是，在页面重新加载/刷新时，哪种方法才是清除本地存储的正确方法。如果这看起来很明显，我很抱歉，但我是Chrome扩展开发领域的新手