我需要 cookie 才能让它工作吗？

Question

我想使用类似此代码的代码来更改我网页的 background-color 和 text-color。它对于更改 header bg-color、颜色以及下拉菜单 background-color 和颜色很有用。但不是菜单的颜色，也不是菜单的顶部栏。只影响下拉框，所以代码很整洁。

但是如果我想 "remember" 我的整个网页的选择，比如让用户可以选择更改颜色方案，而不是更改样式表，因为我有不同宽度和高度的样式表等。

我必须使用 cookie 才能在这里做我想做的事吗？

紫色 Js

function greenColor(){     document.getElementById("content").style.backgroundColor = "purple";
            document.getElementById("copyW").style.backgroundColor = "purple";
            document.getElementById("text").style.backgroundColor = "white";

                            var parentElement =     document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }

        var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: purple");

            }

                            var parentElement =
document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

    }
    }

红色 Js

    function redColor(){
            document.getElementById("content").style.backgroundColor = "red";
            document.getElementById("copyW").style.backgroundColor = "red";
            document.getElementById("text").style.backgroundColor = "white";

                            var parentElement =     document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }

            var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: red");

            }


                        var parentElement = document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }
            }

高对比度Js

function contrastColor(){
            document.getElementById("content").style.backgroundColor = "black";
            document.getElementById("copyW").style.backgroundColor = "grey";
            document.getElementById("text").style.backgroundColor = "black";
                var parentElement = document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: white");

            }



            var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: black");

            }
                var parentElement = document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: white");

            }

            }
            function normalColor(){
            document.getElementById("content").style.backgroundColor = "green";
            document.getElementById("copyW").style.backgroundColor = "green";
            document.getElementById("text").style.backgroundColor = "white";
                var parentElement = document.getElementById("text");
            var lis = parentElement.getElementsByTagName("p");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

             }



            var parentElement = document.getElementById("cssmenu");
            var lis = parentElement.getElementsByTagName("ul");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","background-color: green");

            }
                var parentElement = document.getElementById("webpage");
            var lis = parentElement.getElementsByTagName("a");
            for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute("style","color: black");

            }

            }

那么这是Css

#buttons{
z-index:1;      
display:inline;
border: none;
height:1em;
top:7.5em;
position:absolute;
right:0em;
}
#normal {
background:#008000;
background-size:cover;
cursor:pointer;
}
#purple{
    background:purple;
    background-size:cover;
    cursor:pointer;
    }
#red {
    background:#FF0000;
    background-size:cover;
    cursor:pointer;
    }
#contrast{
    background:black;
    color:white;
    cursor:pointer;
    background-size:cover;
    }

我的 html 只是一个 header，一个改变背景颜色的页脚，还有一个高对比度版本，它也改变文本颜色，因此我设置 "fallbacks", 或自然地选择将其更改为 javascript 中的黑色文本颜色。

然后，是否可以更改我的整个网页，然后如果我必须使用 cookie 来执行此操作，我如何设置 cookiething 以选择保存 color-sheme，或者不是，当用户选择颜色时？

提前感谢您的帮助:) 是否可以更改 css3 动画的样式，在 javascript 中，就像我在处理背景颜色一样？

Answer 1

您不必使用 cookie。如果您不需要服务器参与用户的颜色设置，我建议您改用 localStorage。

Answer 2

是的，您可以使用 cookie 做到这一点。但这对 localStorage 来说可能更好。 localStorage 的几个好处是：

与 cookie 相比，localStorage 没有过期时间
localStorage 有 5mb 的存储容量。这比 cookie 大得多 ~4kb
localStorage 在客户端提供，它删除了额外的 http 请求。

Answer 3

使用本地存储来存储用户选择的颜色。例如，这里是 a working jsFiddle

jQuery

// add a handeler to a color picker element
$('#myColor').change(function() {

    // get the color from the changed picker
    var colorCode = $(this).val();

    // set the color to our header
    $("#myHeader").css("background-color", colorCode );

    // save the color to the browser's `localstorage`
    localStorage.setItem("colorCode", colorCode) ;
});


// when page loads, check if user has a colorcode stored in local storage
if (localStorage.getItem("colorCode") !== null) {

    // if so, set the color to our header and the picker
    var colorCode = localStorage.getItem("colorCode");
    $('#myColor').val( colorCode );
    $("#myHeader").css("background-color", colorCode );
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myHeader"></div>
<br>
<br>
<br>
Pick a color: <input type="color" id="myColor" value="#cccccc" />

CSS

#myHeader{
  height:100px;
  width:100%;
  background-color:#cccccc;
}

Answer 4

localstorage 似乎是最佳选择，谢谢。在构建网页时，我试图使其适合移动设备...... 我的第一个想法是在页面底部隐藏（显示：none）链接，因为我的网页版本中有一个悬停菜单。然后我在移动时隐藏它，反之亦然。

这是一种不好的做法吗？

var parentElement = document.getElementById("cssmenu");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","background-color: black");

我现在了解到，我可以轻松地使用 javascript 来隐藏和显示菜单，这是一个更好的解决方案，因为现在大多数人都启用了 javascript，对吧？但是后来我来到移动端，并不是这里的每个人都有 js，这是正确的假设，还是在他们的系统中实现了 js？我在想，我可以改变上面的代码，隐藏和显示我的 'ul'，但自然不会隐藏第一个 ul，它自己的菜单。这样，我想在我的桌面上保留我的悬停功能，但在我的手机上有一个 onclick，在桌面版本中只隐藏那个 onclick 按钮似乎更好......

现在，我在桌面样式表中设置的任何悬停动作似乎也会影响我的移动样式表。我理解这是因为它将所有内容渲染到一个样式表中，自然地，它会找到悬停并使用这在我的 android 中也是如此.. 有没有什么好的方法可以解决这个问题，我自然考虑过取消悬停效果，并且周围有一个可点击的菜单，似乎手机使悬停在 css 有点老了，我也看了： focus, and :active, 但不被认为是活跃的.. 去这里的方式是活跃的，在那种情况下，我是否必须在我的菜单项中的某个地方实现它？

var parentElement = document.getElementById("cssmenu");
var lis = parentElement.getElementsByTagName("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("style","display: inline");

这可能是我正在寻找的东西，我将对其进行一些试验，看看它是如何进行的，但是对于最佳实践以及未来的一些指示，将不胜感激 :)

我需要 cookie 才能让它工作吗？

Do I need cookies to get this to work?

javascript

css

cookies