更改另一页的 HTML-内容的脚本？

Question

在我的第一页上，我有两个输入框和一个将输入添加到 localStorage 的按钮。添加数据后，我想触发一个事件，该事件将在另一个页面上写出 localStorage 的内容。我的问题是我的脚本找不到第二页上的元素。

将数据添加到 localStorage 的代码：

$("#submitLocal").click(function () {
  var key = inputKey.value;
  var value = inputValue.value;
  localStorage.setItem(key, value);
  if (newWindow == null || newWindow.closed) {
    newWindow = window.open("local.html", "localWindow");
  }
  window.dispatchEvent(new Event("storage"));
});

我添加了事件监听器：

window.addEventListener("storage", myFunc);

调用函数：

function myFunc(event) {
  document.getElementById("addInfo").innerHTML = "";
  for (var i = 0; i < localStorage.length; i++) {
    $("#addInfo").append(
      localStorage.key(i) +
        " " +
        localStorage.getItem(localStorage.key(i)) +
        "<br>"
    );
  }
}

现在，元素“addInfo”在第一个页面上，localStorage 中的数据被写到页面上。但是在第二页找不到元素怎么办呢？

我是 Whosebug 的新手，所以我希望我能够很好地描述问题。

提前致谢。

Answer 1

它总是有助于 post 相关代码。在这种情况下，什么是 $("#submitLocal") ？如果是表单中的提交按钮，使用表单提交事件和preventDefault!

为什么要在事件中调度事件？

只用你所在的页面和第2页的加载事件

主页

$("#myForm").on("submit", function (e) {
  e.preventDefault();
  var key = inputKey.value;
  var value = inputValue.value;
  localStorage.setItem(key, value);
  if (newWindow == null || newWindow.closed) {
    newWindow = window.open("local.html", "localWindow");
  }
});

local.html

function myFunc(event) {
  $("#addInfo").empty();
  for (var i = 0; i < localStorage.length; i++) {
    $("#addInfo").append(
      localStorage.key(i) +
        " " +
        localStorage.getItem(localStorage.key(i)) +
        "<br>"
    );
  }
}

window.addEventListener("load",myFunc)

更改另一页的 HTML-内容的脚本？

Script that change the HTML-content of another page?

javascript

local-storage