Question

我有一个功能可以在不同的外部CSS样式表之间更改我的网页主题，因此用户可以根据自己的体验选择颜色主题。

我尝试了几种不同的方法尝试将更改应用到我网站上的所有页面，目前只更改当前页面，当您点击其他页面时，主题将返回默认设置。

以下是我的代码摘录：

HTML：

<head>
    <link rel="stylesheet" type = "text/css" href="blue.css" id = "blueStyle" title = "blueStyle" />
    <link rel="alternate stylesheet" type = "text/css" href="red.css" id = "redStyle" />
    <link rel="alternate stylesheet" type = "text/css" href="green.css" id = "greenStyle" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
        function setStyleSheet(url) {
            var stylesheet = document.getElementById("blueStyle");
            stylesheet.setAttribute('href', url);
        }
    </script>
</head>
<body>
    <div id ="styleRed" onclick = "setStyleSheet('red.css')" href = "red.css">Red Theme</div>
    <div id ="styleGreen" onclick = "setStyleSheet('green.css')" href = "green.css">Green Theme</div>
    <div id ="styleBlue" onclick = "setStyleSheet('blue.css')" href = "blue.css">Blue Theme</div>
</body>

当我运行代码和函数时，代码和函数运行正常，当前页面上的所有颜色都会发生变化，但只要您点击另一个页面，默认颜色就会返回。

我知道我应该使用cookie来存储这些数据，但这是我的第一个项目，我才开始学习cookie。问题是我只在Notepad ++上有这个项目，它是一个文本编辑器。

我还没有网络主机或域名，但有没有办法测试cookie，看看如果网站只处于开发阶段，这些功能是否有效？或者我必须将一个域名分配给cookie来测试它吗？

Answer 1

域不是必需的，HTTP（S）是。 Cookie是RFC 6265中定义的HTTP状态管理机制。因此，浏览器需要通过HTTP（S）加载文件，以便进行cookie交互。

在本地工作并使用cookie的唯一方法是在本地运行Web服务器，以便您可以使用http://方案加载文件而不是file://方案。

根据网络服务器的配置，您可以通过http://localhost，http://127.0.0.1，http://x.x.x.x加载网页（其中x.x.x.x是您的某个网站上的IP机器接口），或通过一些本地指向的虚假域名（通过/etc/hosts）。

一些预先建好的服务器包用于让您的脚湿透：

我知道如果您为MAMP Pro付费，它会附带一个帮助创建本地域名的工具（它会为您编辑/etc/hosts）。我不知道其他人是否提供这样的东西。

Answer 2

您可以使用虚假域名通过更改主机文件来测试它。使用记事本打开C：\ Windows \ System32 \ drivers \ etc \ hosts，并在末尾添加以下行

127.0.0.1       www.myfakedomain.com

然后您只需导航到www.myfakedomain.com即可在本地计算机上查看您的网站。然后，您可以将cookie的域设置为该域并进行测试。

Answer 3

所有上述解决方案都很棒，但它们更复杂。另一个简单的解决方案是使用查询字符串来传递样式。以下基本代码：

_get是一个获取查询字符串的简单函数

我修改了你的设置样式以遍历所有链接，并将style =添加到页面上的所有链接，以将样式传递给其他文件。

如果这是一个制作项目，我不建议这样做，但事实并非如此，这对你有用。

    <html>
<head>
<head>
<body>


<script>
function _get(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

     function setStyleSheet(url) {
            var stylesheet = document.getElementById("blueStyle");
            stylesheet.setAttribute('href', url);

            $("a").each(function(){
            $(this).attr("href",$(this).attr("href") + "?style=" + url);
            });
        }

        if(_get("style") != null){
        console.log("style is " + _get("style"));
        }


</script>
</body>
</html>

可以在没有域名的情况下创建Cookie吗？

3 个答案: