Question

由于我仍在学习localStorage和cookie技术，因此我尝试使用提交按钮从page1.html更改page2.html上div的颜色，当用户点击page2.html上的提交按钮时，应该永久更改div的颜色这就是我在第1页上的内容：

window.onload = function() {
    var anchors = document.getElementsByClassName("circleBase type1");
    for(var i = 0; i < anchors.length; i++) {
        anchors[i].onclick = function() {
            window.open("EnterInformation.html");
        }
    }
}

第2页的

我使用localStorage永久保存数据，使用此保存我需要更改page1上div的颜色。到目前为止这是第2页：

 function SaveInfo() {
        localStorage.Yritys = $('#Yritys').val();
        localStorage.Henkilönimi = $('#Henkilönimi').val();
        localStorage.Asema_yrityksessa = $('#Asema_yrityksessa').val();
        localStorage.Puhelin_Nr = $("#Puhelin_Nr").val();
        localStorage.e_Mail = $('#e_Mail').val();
        localStorage.Keskustelun_aihe = $('#Keskustelun_aihe').val();

这会是什么解决方案？使用localStorage代替cookie会很好。谢谢！

Answer 1

您可以创建本地存储空间

myCustomColor = '#2B2A28';
localStorage.setItem('myDataStorage', myCustomColor);

然后检索它们

var myLoadedColor = localStorage.getItem('myDataStorage');
document.getElementById('myDiv').style.backgroundColor = myLoadedColor;

myDataStorage是您创建的localStorage的名称。如果愿意，可以使用不同的名称来创建多个localStorage。

您可以在页面加载时在localStorage上使用.getItem，然后根据localStorage数据设置div的颜色。

Answer 2

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

这段小代码会扫描您的页面以查找匹配类的所有元素，然后更改背景颜色。当然，您也可以将它用于单个元素：

var x = document.getElementByClassName("example");
x.style.backgroundColor = "red";

但在这种情况下，JavaScript只会更改匹配类所找到的第一个div。

总结一下：没有其他方便的方法，只能以独特且可识别的方式标记/标记元素。通常这是通过名称或ID来完成的。类也可以工作，但很少以这种方式使用。

嗯，实际上你也可以遍历DOM并计算元素，以便改变让我们说出现的第15个div。但是如果你在几天后添加额外的div呢？这是一种非常不舒服的方法。

使用localStorage，它将使用名称或ID。你只有一次给每个div它的id和/或名字。

如何从其他页面更改页面上div的颜色

2 个答案: