Question

好吧所以我有两个页面，1页包含一个带有可点击div的表，其中有很多，当按下1时，它会进入第2页，其中包含一个表单，用户输入存储在本地存储中的信息，现在我想要实现的是在第1页上更改该DIV的颜色，如果表单已成功提交，我的意思是永久更改它。
这是我在第1页上使用的代码：

 window.onload = function () {
        myCustomColor = 'red';
        localStorage.setItem('myDataStorage', myCustomColor);
    var d = document.getElementsByClassName("circleBase type1");
    for(var i = 0; i < d.length; i++) {
        d[i].onclick = function() {
            window.open("EnterInformation.html");               
        }

    }
}

使用此代码我将颜色存储到本地存储。现在出于测试目的，我只为一个div id='L1'添加了一个ID，因此我尝试按.getItem这样获取项目：

 function changeColor() {
        var myLoadedColor = localStorage.getItem('myDataStorage');
        document.getElementById('L1').style.backgroundColor = myLoadedColor;

 <input type="submit" name="appointment" value="" class="btn-warning" onclick="SaveInfo(); closeSelf(); changeColor()" />

什么都没发生？！现在我想看看是否通过尝试更改第2页上的div颜色（EnterInformation.html）来获取存储的颜色并且它可以工作，但它会将div的颜色更改为秒，然后将其返回到默认，为什么会发生这种情况？有什么建议吗？我想发布的原始问题是可以从另一个页面更改点击的div的颜色，但这比我想象的要复杂得多！

P.S。这两个页面在不同的标签页上同时打开。

Answer 1

您可能遇到此问题，因为当您点击input并type="submit"时，它会尝试“提交”其附加的表单。通常，这涉及页面刷新（这不是您想要的）。你可以听取表单提交并以编程方式取消其传播，或者（假设我们实际上不想提交任何内容）更改html以使用button和type="button"。就个人而言，我认为最好使用合适的工具来完成工作，所以让我们选择2。

<button type="button class="btn-warning" onclick="SaveInfo(); closeSelf(); changeColor()">Click me to changeColor</button>

您的下一个问题就是，即使您的button附加的javascript代码有效，另一个页面也不会“倾听”对共享localStorage的更改。为此，我们可以利用this answer中的代码，该代码描述绑定到storage事件的过程，并作为结果执行操作。在你的情况下，它看起来像：

window.addEventListener('storage', function(event){
    if (event.storageArea === localStorage) {
        var myLoadedColor = localStorage.getItem('myDataStorage');
        document.getElementById('L1').style.backgroundColor = myLoadedColor;
    }
}, false);

我建议在您的代码中引入addEventListener之后，您会看到“升级”新的button元素以使用类似的方法。我建议这样做是为了将显示代码与逻辑代码分开。它将在未来使维护变得更加容易。我会让你提出自己的比喻，为什么将类似的东西放在一起会让它们更容易找到和更新：）

从另一个页面上的localStorage更改div的颜色不起作用

1 个答案: