Javascript LocalStorage未保存onclick属性

我正在尝试创建一个日历web应用程序，并希望使用localstorage保存用户的状态。我尝试过使用两种方法（innerHTML以及javascript DOM to JSON；），但每种方法都会删除按钮的onclick事件

我认为问题在于它只是字符串化了innerhtml，出于某种原因，它没有列出我的onlick事件（尽管onlick事件触发）。我应该怎么做，以便用户可以重新加载页面并仍然使用按钮

下面是一个显示按钮停止工作的示例（删除缓存和网站cookie/数据以使按钮再次工作）：

这是存在问题的我的wbesite（例如：双击“Ae 101A”并在日历中双击它。它应该会消失。现在再次添加它并重新加载页面。现在它不会在双击时消失）：

---

您似乎正在使用jQuery。为了将事件挂钩到动态创建的元素，我建议使用选择器过滤方法：不要将click事件绑定到button元素本身，而是侦听父容器（甚至文档）上的click事件，并通过按钮的选择器进行过滤。以下是如何：

window.pageState;

$(document).ready(function(){
  let div = document.getElementById("div")

  $(document).on('click', "#my-button", function (event) {
    const btn = event.target; // or btn = document.getElementById("my-button");
    change_text(btn);
  }); 
  
  window.pageState = JSON.parse(localStorage.getItem('pageState'));
  if (window.pageState === null) {
    let btn = document.createElement('button')
    btn.innerText = "Hello";
    btn.style = "height: 100px";
    btn.id = "my-button";
    div.appendChild(btn);
    window.pageState = {state: div.innerHTML};
  }
  else {div.innerHTML = window.pageState.state}
});

function change_text(btn) {
  let div = document.getElementById("div");
  if (btn.innerText === "Hello") {btn.innerText = "Goodbye";}
  else if (btn.innerText === "Goodbye") {btn.innerText = "Hello";}
  localStorage.setItem('pageState', JSON.stringify(window.pageState));
}

---

阅读更多相关信息。

因此，您想将数据保存在localStorage中，无论用户选择的是什么？只想知道为什么要使用DOMtoJson，可能您试图实现的目标也可以通过其他方式实现是的，我也可以保存.innerHTML。问题是innerHTML出于某种原因保存了样式，但没有保存onclick，即使它们都是以相同的方式添加的。如果你访问我的网站（），你可以看到样式确实很棒，但是当你检查元素时，onclick在你要找的DOM中的什么地方看起来不像onclick？谢谢你的回复。似乎你每次都在重新分配按钮的onclick。如果将onlick赋值移到第一个If语句中，它将不再工作。当用户将事件添加到日历时，我需要只分配一次按钮的onlick。之后，我应该将其存储在localStorage中。代码有没有办法做到这一点？按钮上不再有onclick事件。单击文档将过滤选择器并仅在目标与选择器匹配时调用处理程序。这样，如果有一个id为

my button

的按钮，则调用

change\u text

函数。如果按钮不存在，则不会发生任何事情。

window.pageState;

$(document).ready(function(){
  let div = document.getElementById("div")

  $(document).on('click', "#my-button", function (event) {
    const btn = event.target; // or btn = document.getElementById("my-button");
    change_text(btn);
  }); 
  
  window.pageState = JSON.parse(localStorage.getItem('pageState'));
  if (window.pageState === null) {
    let btn = document.createElement('button')
    btn.innerText = "Hello";
    btn.style = "height: 100px";
    btn.id = "my-button";
    div.appendChild(btn);
    window.pageState = {state: div.innerHTML};
  }
  else {div.innerHTML = window.pageState.state}
});

function change_text(btn) {
  let div = document.getElementById("div");
  if (btn.innerText === "Hello") {btn.innerText = "Goodbye";}
  else if (btn.innerText === "Goodbye") {btn.innerText = "Hello";}
  localStorage.setItem('pageState', JSON.stringify(window.pageState));
}