Question

我正在尝试使用本地存储更改网站的背景颜色。我在onchange()函数的HTML中使用colours()，其余的是下面的JavaScript

var bgcolour;

window.onload = function theme(){

    document.body.style.backgroundColor = "red";
    localStorage.setItem("bgcolour", 1);
}


function colours(){
    localStorage.bgcolour = document.getElementById("party").value;

    if (localStorage.bgcolour == '1'){
        document.body.style.backgroundColor = "red";
    }
}

它什么都不做。它甚至没有改变，更不用说将它存储为本地存储。

我一直缺少重要的，小部分的代码，感觉我已经用这个重新完成了。

非常感谢任何帮助！

HTML：

 <select name="pnumber" id="party" onchange="colours()">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
     <option value="9">9</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option>
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15 (maximum)</option>
 </select>

Answer 1

代码错误，您正在设置和检查localStorage值。此外，您需要从具有id方的节点获取值。

＆＃13;

var bgcolour;

window.onload = function theme(){

    document.body.style.backgroundColor = "red";
    localStorage.setItem("bgcolour", 1);
}

var party = document.getElementById('party')
function colours(){
 
    localStorage.setItem('bgcolor', party.value);

    if (localStorage.getItem('bgcolour') === '1'){
        document.body.style.backgroundColor = "red";
    }
  else{
    document.body.style.backgroundColor = "green";
  }
}

＆＃13;

<select name="pnumber" id="party" onchange="colours()">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
     <option value="9">9</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option>
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15 (maximum)</option>
 </select>

＆＃13;

Answer 2

您似乎在设置和从本地存储中获取值时遇到了一些问题。以下是如何完成的。

//商店

localStorage.setItem("lastname", "Smith");

//检索

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Answer 3

我相信你的HTML有问题。 See this plunk。我复制粘贴你所有的JavaScript，我假设你的HTML是这样的：

<input type="text" id="party" onchange="colours()" />

您会注意到背景原来是灰色的，然后在文本框中输入值“1”会使背景变为红色。

本地存储以更改背景颜色

3 个答案: