记住刷新状态 - 带有 cookie 的 jQuery答案

【问题标题】：Remember state on refreshing - jQuery with cookie记住刷新状态 - 带有 cookie 的 jQuery
【发布时间】：2015-10-21 12:56:34
【问题描述】：

我正在尝试开发一个可以记住页面刷新后状态的脚本。

这是我到目前为止所做的。

jQuery:

      $(window).ready(function() {
var voteId = $('.gallery-item a');
$(voteId).click(function() {
$(this).text('Thank you!');
$(this).css('background-color', 'green');
});
});

我试过这个，但没有运气：

jQuery:

var cookies = document.cookie.split(";");
    for(var i=0; i < cookies.length; i++) {
    var equals = cookies[i].indexOf("=");
    var name = equals > -1 ? cookies[i].substr(0, equals) : cookies[i];
    document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }

【问题讨论】：

@Darren Willows 的答案应该对你有用。但是，如果 cookie 不是您想要的唯一方式，您也可以尝试 localstorage 或 sessionStorage，它可以达到您的目的。
我知道localStorage和sessionStorage，但从未使用过。

标签： javascript jquery html performance cookies

【解决方案1】：

设置 Cookie

下面函数的参数是cookie的名称（cname）、cookie的值（cvalue）、距离cookie的天数应该过期（exdays）。

该函数通过将 cookie 名称、cookie 值和过期字符串相加来设置 cookie。

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

获取 Cookie

以cookiename为参数(cname)。

使用文本创建一个变量(name)以搜索(cname + "=")。

将分号上的 document.cookie 拆分为一个名为 ca (ca = document.cookie.split(';')) 的数组。

循环遍历 ca 数组 (i=0;i

如果找到cookie(c.indexOf(name) == 0)，返回cookie的值(c.substring(name.length,c.length)。

如果没有找到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 "";
}

设置和获取

setCookie("message", "Thank You", 365); 
setCookie("color", "#0F0", 365); 

var message=getCookie("message"); 
var color=getCookie("color");

这将设置两个 cookie message 和 color，exp 为 1 年。您也可以使用 JSON 数组完成所有操作。

【讨论】：

抱歉，能否详细说明？我到底应该把它放在哪里？
你把它放在一个 JS 文件或你的 Script 标签中，然后在你需要的时候调用函数。
请看我上面的问题。 jQuery 正在从以前的状态变为“谢谢”状态。我需要 cookie 记住这一点，所以当我刷新页面时，“谢谢”仍然存在。这是我正在开发的投票系统，当用户投票时，会出现“谢谢”。我也需要在刷新后保留它。你能把你的代码放在jsfiddle中吗？我对 JS 不是很熟悉。
我不知道我还能做什么，上面的这个方法是一个 JavaScript 唯一的方法。它还会在刷新时记住 cookie，我不能为你做所有的工作。显然你不应该使用 JavaScript，因为你目前还没有足够的知识来自己做这件事。
感谢您的回答，但对我没有帮助。我已经设置了 cookie。我想要的是记住从“投票”到“谢谢”的变化，这发生在触发“点击”时。

【解决方案2】：

看看 JS Cookie，因为它不需要 jQuery。

用于处理 cookie 的简单、轻量级 JavaScript API

适用于所有浏览器

接受任何字符

大量测试

无依赖

不显眼的 JSON 支持

支持 AMD/CommonJS

符合 RFC 6265

启用自定义解码

很好的维基

~800 字节压缩！

https://github.com/js-cookie/js-cookie

Cookies.set('name', 'true', { expires: 7, path: '' });
Cookies.get('name'); // => 'true'
Cookies.remove('name', { path: '' });

【讨论】：

谢谢，但不抱歉。我想用 jQuery 或简单的 JavaScript 来完成这项工作。
这里只是一个旁注，这是一个仅限 JS 的解决方案。 JS 代表 JavaScript。我也希望您知道，Simply JavaScript 是一本书，而不是 JavaScript 的一种形式。
是的，我知道这一点，但我不会使用任何插件。我需要的是记住“谢谢”+背景颜色的脚本：绿色状态。如果您能详细说明上面的答案，我将不胜感激。谢谢。