Question

我想让顾客选择一种颜色，然后当他转到其他页面时，颜色保持不变。这是第一页上选择颜色的代码：

       <select id="color" style="width: 5%; height: 10%" size="5">
       <option value="white">White</option>
       <option value="red">Red</option>
       <option value="yellow">Yellow</option>
       <option value="blue">Blue</option>
       <option value="green">Green</option>
   </select>
   <script>

       document.getElementById("color").onchange = function () {
           document.body.style.background = this.options[this.selectedIndex].value;
       }

Answer 1

这似乎是localStorage的一个很好的用例：

document.querySelector('#color').addEventListener('change', function () {
  document.body.style.background = this.value;
  localStorage.setItem('appColor', this.value);
});

document.body.style.background= localStorage.getItem('appColor');

见Fiddle。每次选择颜色时，都会记住它，并在下次运行时成为默认颜色。

旁注：您可以简化：

this.options[this.selectedIndex].value;

......对此：

this.value;

Answer 2

这应该是你的脚本：

<body onload="OnLoad()"> //onLoad: run the function OnLoad() when the body is being load
    <select id="color" style="width: 5%; height: 10%" size="5">
       <option value="white">White</option>
       <option value="red">Red</option>
       <option value="yellow">Yellow</option>
       <option value="blue">Blue</option>
       <option value="green">Green</option>
   </select>

   <script>
    function OnLoad() {
        document.getElementById("color").onchange = function () { //Getting the background color from the select
            document.body.style.background = this.options[this.selectedIndex].value; //Setting the background color
            document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value; //Storing in a cookie named: WebBackgroundColor the color that was chosen
        }
        var color = getCookie("WebBackgroundColor"); //Getting the color stored on the cookie
        document.body.style.background = color; //Setting the background color to the same color as stored in the cookie
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
        }
        return "";
    }
    </script>
</body>

要将此脚本添加到其他页面，您需要将正文从<body>更改为<body onload="OnLoad()">

并且您需要在页面底部（或标题部分）添加所有脚本内容：

   <script>
    function OnLoad() {
        document.getElementById("color").onchange = function () { //Getting the background color from the select
            document.body.style.background = this.options[this.selectedIndex].value; //Setting the background color
            document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value; //Storing in a cookie named: WebBackgroundColor the color that was chosen
        }
        var color = getCookie("WebBackgroundColor"); //Getting the color stored on the cookie
        document.body.style.background = color; //Setting the background color to the same color as stored in the cookie
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
        }
        return "";
    }
    </script>

所有页面的背景颜色相同

2 个答案: