使用 JavaScript 设置 cookie 并获取 cookie

IT技术 javascript html css cookies
2021-01-30 23:00:26

我正在尝试根据我在 HTML 中选择的 CSS 文件来设置 cookie。我有一个包含选项列表的表单,以及不同的 CSS 文件作为值。当我选择一个文件时,它应该会保存到一个 cookie 中大约一个星期。下次打开 HTML 文件时,它应该是您选择的前一个文件。

JavaScript 代码:

function cssLayout() {
    document.getElementById("css").href = this.value;
}


function setCookie(){
    var date = new Date("Februari 10, 2013");
    var dateString = date.toGMTString();
    var cookieString = "Css=document.getElementById("css").href" + dateString;
    document.cookie = cookieString;
}

function getCookie(){
    alert(document.cookie);
}

HTML代码:

<form>
    Select your css layout:<br>
    <select id="myList">
        <option value="style-1.css">CSS1</option>
        <option value="style-2.css">CSS2</option>  
        <option value="style-3.css">CSS3</option>
        <option value="style-4.css">CSS4</option>
    </select>
</form>
4个回答

我发现以下代码比其他任何代码都要简单得多:

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

现在,调用函数

setCookie('ppkcookie','testcookie',7);

var x = getCookie('ppkcookie');
if (x) {
    [do something with x]
}

来源 - http://www.quirksmode.org/js/cookies.html

他们今天更新了页面,因此页面中的所有内容都应该是最新的。

eraseCookie功能并没有为我工作(FireFox的开发版66.0b4)。相反,我不得不使用 BT 答案中的代码:document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'.
2021-03-11 23:00:26
为什么这么复杂?使用date.setDate(date.getDate() + days);替代
2021-03-27 23:00:26
很好的答案。在 cookie 值中使用分号 (;) 时,我遇到了问题。所以我细化了一些线条。请更新您的答案。来自函数 setCookie(name,value,days) document.cookie = name + "=" + (encodeURIComponent(value) || "") + expires + "; path=/"; 来自函数 getCookie(name) 在 retutn 语句中if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length)); 使用encodeURIComponent(), decodeURIComponent()
2021-04-04 23:00:26
toGMTString()已弃用 - 仅供参考。参考
2021-04-06 23:00:26
如果您的 cookie 包含分号,这将不起作用。
2021-04-06 23:00:26

这些参考资料比 w3schools(有史以来最糟糕的网络参考资料)好得多:

源自这些参考资料的示例:

// sets the cookie cookie1
document.cookie = 'cookie1=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'

// sets the cookie cookie2 (cookie1 is *not* overwritten)
document.cookie = 'cookie2=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'

// remove cookie2
document.cookie = 'cookie2=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'

Mozilla 参考甚至有一个不错的 cookie 库,您可以使用。

看来IE8及以下不支持max-age,所以expires是比较安全的选择。blogs.msdn.com/b/ieinternals/archive/2009/08/20/...
2021-03-11 23:00:26
虽然浏览器仍然支持 expires 变量已经过时。使用 max-age 代替!
2021-03-22 23:00:26
domain您还可以在 cookie 上设置一个参数,如果您想在站点上的不同子域中使用 cookie,这将非常有用。
2021-03-28 23:00:26
请注意,MDN 参考页面没有提及expires已弃用/过时的内容。那是因为它有时可以服务于max-age. 的值max-age必须解释为秒的量的数值,而expires值可以被设置为特殊值Session不一样的max-age=0;
2021-04-03 23:00:26
不要在 Chrome 上工作。在这里查看原因:stackoverflow.com/questions/26349052/...
2021-04-04 23:00:26

检查W3Schools.com 上的 JavaScript Cookies 以通过 JS 设置和获取 cookie 值。

只需使用那里提到的 setCookie 和 getCookie 方法。

因此,代码将类似于:

<script>
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function cssSelected() {
    var cssSelected = $('#myList')[0].value;
    if (cssSelected !== "select") {
        setCookie("selectedCSS", cssSelected, 3);
    }
}

$(document).ready(function() {
    $('#myList')[0].value = getCookie("selectedCSS");
})
</script>
<select id="myList" onchange="cssSelected();">
    <option value="select">--Select--</option>
    <option value="style-1.css">CSS1</option>
    <option value="style-2.css">CSS2</option>
    <option value="style-3.css">CSS3</option>
    <option value="style-4.css">CSS4</option>
</select>
-1 为 w3schools
2021-03-15 23:00:26
@BT 您能否详细说明上述代码已过时和被误导的情况?
2021-03-16 23:00:26
愚蠢!!+1 对于工作示例,我实际上没有看到 w3schools 的问题,
2021-03-19 23:00:26
我刚刚检查了我们的分析,我们 10% 的 IE 用户仍在使用 IE8 或更低版本。所以使用“max-age”是一个非常糟糕的主意。
2021-03-31 23:00:26
@BT,我还没有看到过时或包含不正确信息的 w3schools 参考。
2021-04-05 23:00:26

我确信这个问题应该有一个更一般的答案,其中包含一些可重用的代码,这些代码将 cookie 作为键值对使用。

这个片段取自MDN,可能是值得信赖的。这是用于处理 cookie 的 UTF 安全对象:

var docCookies = {
  getItem: function (sKey) {
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!sKey || !this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: /* optional method: you can safely remove it! */ function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

Mozilla 有一些测试来证明这在所有情况下都有效。

还有一个另外的片段在这里

setItem对我不起作用。我在 chrome 上测试过。其他方法工作正常。
2021-03-19 23:00:26
只是警告@SandipPingle,此答案中提供的代码实际上已获得 GPL 许可。
2021-03-23 23:00:26
@MarcinHabuszewski 感谢您指出。那么我如何使用此代码(我的应用程序未获得 GPL 许可)?
2021-03-25 23:00:26
@SandipPingle 这就是 GPL 的“魅力”,您不能(除非您将应用程序转为 GPL)。这段代码有点类似于该问题的通用解决方案,所以它引出了一个问题:通用代码实际上可以被许可(或者这种许可在通用代码的情况下是否有效)?尝试使用不同的(非 GPL 的)代码来解决您的问题。
2021-03-28 23:00:26
无论是否 GPL,我更喜欢我可以阅读的代码
2021-04-01 23:00:26