如何更改每个会话的链接颜色答案

【问题标题】：How to change link colour with each session如何更改每个会话的链接颜色
【发布时间】：2015-11-21 20:11:49
【问题描述】：

我正在尝试找出一种方法来更改每个会话中网站的悬停链接颜色。

我有一些 javascript 可以改变每次悬停时的悬停颜色...

<script>
    var colors = Array("#A3F8EF", "#FF7275", "#CBB6E7", "#FF9D74", "#FDF874"),
        idx;
    $("div a").hover(function() {
        idx = Math.floor(Math.random() * colors.length); // Pick random index
        $(this).css("background-color", colors[idx]);
    }, function() {
        $(this).css("background-color", "transparent");
    });
</script>

但我不确定如何在每个会话中只做这个？考虑可能使用这个javascript https://github.com/js-cookie/js-cookie

类似的东西

 if($.cookie("visited")){ //hover color set } else { //set hover color
 }

但任何其他建议都会很棒

---更多信息---

刚刚发现这个网站几乎可以满足我的需求，但每天都在变化，而不是在刷新时。 http://www.intworks.com/ 不太清楚它是如何完成的？

【问题讨论】：

“会话”是什么意思？ JavaScript 是基于客户端的，因此与服务器端会话没有连接，如果这就是您所指的。
@RoryMcCrossan 当您存储会话时，您通过 cookie 来完成。 cookie 可以通过 PHP 和 JS 访问和修改。
@YazanWYusuf OPs 提到的 cookie 已被编辑，但现在更清楚了他的意思。此外，您应该注意会话数据并不总是存储在 cookie 中。它也可以保存在服务器端的内存或数据存储中。
如果用户清除cookies，每次浏览器关闭时存储的预期结果是什么？

标签： javascript jquery css session cookies

【解决方案1】：

if(localStorage.getItem('popState') != 'shown'){
    //enter your code here to work on the initial session
        localStorage.setItem('popState','shown')
    });
}

您了解过 HTML5 本地存储吗？我发现它非常有用，看起来好像可以在这里应用。只是需要考虑的事情。（上面是我在jQuery中使用的sn-p）

【讨论】：

【解决方案2】：

一种解决方案是再制作 2 个 cookie whatsession 和 color 并将当前会话存储在 whatsession。
在您的 JS 代码中检查当前会话是否等于 cookie whatsession。
如果两者相等，则只需使用 color cookie 中的颜色即可。
如果不是，请更改颜色 cookie 并将 whatsession cookie 更新为新会话。

【讨论】：

【解决方案3】：

我一直在试验 Matt 的答案，并认为我找到了一个可行的解决方案，如下所示：

<script>
    if (localStorage.getItem("visited") != "true") {
        var colors = Array("#A3F8EF", "#FF7275", "#CBB6E7", "#FF9D74", "#FDF874"),
            idx;
        idx = Math.floor(Math.random() * colors.length); // Pick random index
        sessionStorage.setItem("colour", colors[idx]);
        newColour = sessionStorage.getItem("colour");
    }
    document.getElementById("creditsTitle").style.color = newColour;
    $("div a").hover(function() {
        $(this).css("background-color", newColour);
    }, function() {
        $(this).css("background-color", "transparent");
    });
    sessionStorage.setItem("visited", "true");
</script>

这似乎工作正常，但我肯定可以进一步改进。

【讨论】：