通过localStorage在两个页面之间传递点击事件

Question

我想从第二页获取一个点击事件。在第一页有一个链接到第二页，当在第二页点击按钮时，会在第一页上添加一个HTML行。我尝试使用localStorage来传递数据。我的代码不起作用，请看下面的代码：

第一页.html

HTML

<div id="content">
</div>

JS

JS（JavaScript）是一种广泛使用的脚本语言，用于开发Web应用程序和动态网站。它通常与HTML和CSS一起使用，可以用于创建交互式用户界面、动画效果和数据可视化等功能。

var     output = document.getElementById('content');

addEvent(window, 'storage', function (event) {
  if (event.key == 'StorageName') {
    output.innerHTML = event.newValue;
  }
});

第二页.html

HTML

<input id="data" type="button" value="+" onclick="addRow()">

JS

addEvent(dataInput, 'keyup', function () {
localStorage.setItem('StorageName', this.value);
});

var dataInput = dataInput = document.getElementById('data');
object.onclick = function(){
addRow() {
var div = document.createElement('div');

div.className = 'row';

div.innerHTML = '<button>GO</button>';

document.getElementById('content').appendChild(div);
}
};

- Utpal Sarkar

---

你的JS代码很难理解。首先，我没有看到addRow函数在哪里定义。当你点击按钮时实际上会发生什么？ - pixelearth

你是否在步进式调试器中跟踪了你的代码？https://developers.google.com/web/tools/chrome-devtools/javascript/ - Lee Kowalkowski

Answer 1

您没有正确定义addRow()函数。函数的名称是使用关键字function定义的，而不是在函数体内部定义。您的代码：

object.onclick = function(){
addRow() {
var div = document.createElement('div');

div.className = 'row';

div.innerHTML = '<button>GO</button>';

document.getElementById('content').appendChild(div);
}
};

应该更改为：

function addRow() {
    var div = document.createElement('div');

    div.className = 'row';

    div.innerHTML = '<button>GO</button>';

    document.getElementById('content').appendChild(div);
}
object.onclick = addRow;

- skyline3000

---

@pixelearth，你删除了你的答案并将其变成了我的答案的评论，但我相信你本意是要将其作为实际问题的评论... - skyline3000

确实，很好的发现。 - pixelearth

Answer 2

我同意skyline3000的答案，addRow()应该被定义。此外还有一些其他的事情可以/应该改变：

• 在附加事件之前定义dataInput
• object.onclick应该是dataInput.onclick，因为那是被点击的元素。(你真的想要click事件吗？也许是onkeyup?)
• 当你设置localStorage时，你想要设置传递给页面1的函数定义，这似乎是addRow()。只需删除括号以传递定义即可。(在使用之前也应该定义)
• 如果你只想传递函数，你不应该在页面2上设置onclick事件。你应该记录你想要运行它的次数，当你到达页面1时。
• 如果函数没有改变，你不需要每次都传递函数；只需设置一次并记录它被点击的次数。
• 页面1可以捕获加载事件并检查localStorage中的函数定义和运行次数。然后它可以循环执行函数。
• 你现有的代码没有添加回到页面2的链接，如果这是你想要的，但当你知道文件名和路径时，你可以在addrow函数中添加它。

页面1

var output = document.getElementById('content');

addEvent(window, 'load', function (event) {
  if (localStorage.getItem('StorageName') && localStorage.getItem('rowsToAdd')) {
    for(var i = 0; i > rowsToAdd;i++){
      var addNewRow = localStorage.getItem('StorageName');
      addNewRow();
     }
  }
});

第二页

var dataInput = document.getElementById('data');

function addRow() {
    var div = document.createElement('div');

    div.className = 'row';

    div.innerHTML = '<button>GO</button>';

    document.getElementById('content').appendChild(div);

};
localStorage.setItem('StorageName', addRow);
dataInput.onclick = function() {
    if(localStorage.getItem('rowsToAdd')){
        localStorage.setItem('rowsToAdd', localStorage.getItem('rowsToAdd') + 1); 
    }else{
        localStorage.setItem('rowsToAdd',1);
    }
}

我没有测试过这段代码，所以复制粘贴可能无法正常工作，但应该会非常接近。

我也尽力根据我的理解回答了你的问题，但我并没有完全看到你似乎想要的结果。

- rjustin

---

可能还需要进行一些空值检查。也许在文档准备就绪事件触发之前不要执行任何操作。 - rjustin