记住状态刷新- jQuery与cookie

Remember state on refreshing - jQuery with cookie

本文关键字：jQuery cookie 刷新 状态      更新时间：2023-09-26

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

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

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";
    }

设置Cookie

下面函数的参数是cookie的名称(cname)， cookie的值(cvalue)，以及cookie 到期的天数(exdays)。

该函数通过将cookie名称、cookie值和expires字符串相加来设置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;
}

Get a Cookie

将cookiename作为参数(cname)

创建一个变量(name)，其中包含要搜索的文本(cname + "=")。

拆分文档。(ca = document.cookie.split(';')))

循环遍历ca数组(i=0

如果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 "";
}

Set and Get

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

这将设置两个cookie 消息和颜色， exp为1年。

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

处理cookie的简单轻量级JavaScript API

适用于所有浏览器

接受任意字符

进行大量测试

不依赖

不显眼的JSON支持

支持AMD/CommonJS

RFC 6265兼容

启用自定义解码

非常好的Wiki

~800 bytes gzipped!

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

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