Javascript localstorage如何保存按钮_Javascript_Html_Local Storage

Javascript localstorage如何保存按钮

javascript html

Javascript localstorage如何保存按钮,javascript,html,local-storage,Javascript,Html,Local Storage,我设法保存了输入字段中的文本，但问题是我不知道如何保存按钮。当我点击按钮时，按钮会变成白色，并且该座位的价格将显示在输入字段中。价格节约，但按钮不会保持白色 <script> function changeBlue(element) { var backgroundColor = element.style.background; if (backgroundColor == "white") { element.style.background =

我设法保存了输入字段中的文本，但问题是我不知道如何保存按钮。当我点击按钮时，按钮会变成白色，并且该座位的价格将显示在输入字段中。价格节约，但按钮不会保持白色

<script>

function changeBlue(element) {
    var backgroundColor = element.style.background;
    if (backgroundColor == "white") {
        element.style.background = "blue";
        add(-7.5)
    } else {

        element.style.background = "white";
        add(7.5)
    }

}

function add(val) {
var counter = document.getElementById('testInput').value;
var b = parseFloat(counter,10) + val;

    if (b < 0) {
        b = 0;
    }

    document.getElementById('testInput').value = b;
    return b;

}


    function save(){

    var fieldValue = document.getElementById("testInput").value;
    localStorage.setItem("text", fieldValue)
    var buttonStorage = document.getElementsByClass("blauw").value;
    localStorage.setItem("button", buttonStorage)

}

function load(){

    var storedValue = localStorage.getItem("text");
    if(storedValue){

    document.getElementById("testInput").value = storedValue;

    }
    var storedButton = localStorage.getItem("button");
    if(storedButton){

    document.getElementsByClass("blauw").value = storedButton;

    }
}


</script>

<body onload="load()">

 <input type="text" id="testInput"/>
 <input type="button" id="testButton" value="Save" onclick="save()"/>
 <input class="blauw" type="button" id="testButton2" value="click me to turn white"
 style="background-color:blue" onclick="changeBlue(this)">
 <input class="blauw" type="button" id="testButton2" value="click me to turn white"style="background-color:blue" onclick="changeBlue(this)">


</body>


功能更改蓝色（元素）{
var backgroundColor=element.style.background；
如果（背景色=“白色”）{
element.style.background=“蓝色”；
加上（-7.5）
}否则{
element.style.background=“白色”；
加（7.5）
}
}
函数添加（val）{
var counter=document.getElementById（'testInput'）。值；
var b=解析浮点（计数器，10）+val；
if（b<0）{
b=0；
}
document.getElementById（'testInput'）。值=b；
返回b；
}
函数save（）{
var fieldValue=document.getElementById（“testInput”）.value；
localStorage.setItem（“文本”，字段值）
var buttonStorage=document.getElementsByClass（“blauw”）.value；
setItem（“按钮”，按钮存储）
}
函数加载（）{
var storedValue=localStorage.getItem（“文本”）；
if（存储值）{
document.getElementById（“testInput”）.value=storedValue；
}
var storedButton=localStorage.getItem（“按钮”）；
如果（存储按钮）{
document.getElementsByClass（“blauw”）.value=storedButton；
}
}

我做了一个我想做的小样本。我不想使用按钮的Id，因为我在一个表中有500个按钮。

这是因为

getElementsByClass

（它是

getElementsByClassName

btw）返回该类中所有元素的节点列表
要使其工作，您需要使用for循环遍历列表中的所有项，并将每个元素的值设置为localStorage值
有关更多信息，请参见以下链接：

非常小的模型可以给你一个想法：
（在JS中，我在注释中输入了您将用于您的情况的代码行。）

函数changeValues（）{ var list=document.getElementsByClassName（“子”）；//var list=document.getElementsByClassName（“blauw”）；对于（var i=0；iSo）缩短它。抽象掉我们不需要的位。发布一个测试用例。不要因为重要的东西“太长”而忽略它们不，我说的是缩短它。不要发布所有内容！！@LightnessRacesinOrbit是对的。这段代码没有任何帮助。它甚至缺少了你在回答中提到的输入字段。因此，即使我把它放在小提琴上看你在做什么，它也会抛出一个错误。你应该发布一个包含几个元素和简单javascript的简短测试用例作为示例。只是一个例子注意：您的id 属性应该是唯一的。也许这样，您就可以将要着色的元素的id保存在localstorage中，并在页面加载时循环到recolor。很抱歉，我发布了它，但前面没有足够的空间。我已将其更改为我想要实现的示例。我不明白您的想法mean@CeesvandenToren-添加了一些链接和代码段，但是localStorage.setItem（）看起来如何？但是我不需要做任何更改，因为按钮已经变为白色，但问题是，当我关闭浏览器并再次打开它时，按钮保持白色，而不是变蓝localStorage.setItem（）之前的线条应该是这样的：var buttonStorage=document.getElementsByClassName（“blauw”）[0].value；。你可以在第二行的顶部找到它，你看过了吗？