使用 JavaScript 设置 cookie 并获取 cookie
Set cookie and get cookie with JavaScript
我正在尝试根据我在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);
}
网页代码:
<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>
我发现以下代码比其他任何代码都简单得多:
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
他们今天更新了页面,因此页面中的所有内容都应该是最新的。
这些是比w3schools(有史以来最糟糕的网络参考)更好的参考:
- 饼干的工作原理 (quirksmode.org)
- MDN document.cookie
从这些参考资料中得出的示例:
// 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库,你可以使用。
检查 JavaScript Cookie on W3Schools.com 是否通过 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>
我相信
这个问题应该有一个更通用的答案,有一些可重用的代码,这些代码将 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有一些测试来证明这在所有情况下都有效。
这里有一个替代代码段:
相关文章:
- 如何从浏览器中获取cookie,从另一个应用程序中删除
- 如何从〔object HTMLUListElement〕将UL从cookie获取到Array
- 分析JS代码以在客户端获取cookie
- 无法获取表单's面板的x和y坐标,并在加载时从cookie中设置它们
- Js_of_ocaml-获取cookie时出错
- 获取cookie's的单值javascript
- 如何使用 JavaScript 获取所有以单词开头的 cookie
- 获取用于编写JavaScript cookie的复选框
- 如何使用socket.io获取cookie数据
- 无法在 Express.js 中设置和获取 Cookie
- JQuery-从响应中获取Cookie
- 获取JS中特定路径的cookie,不包括根路径
- 是否将Javascript变量保存为PHP变量?获取、发布、COOKIE
- 从Windows8JS应用程序获取仅HTTP cookie
- 在WordPress中创建并获取cookie
- 使用PHP和JSP在另一个网页中获取cookie值
- 获取快速编码的 cookie 作为标头值
- 无法从带有 Socket.IO 的 Cookie 获取快速会话 ID
- 从谷歌分析cookie获取当前用户/会话页面视图
- $cookie获取的数据不是Map而是String