如何使用 javascript 创建和读取 cookie 的值?
我想根据 HTML 中选择的 CSS 文件来设置 cookie。我有一个带有选项列表的表单,不同的 CSS 文件作为值。当我选择一个文件时,它应该保存在 cookie 中大约一周。下次打开 HTML 文件时,它应该就是你选择的前一个文件。
我觉得下面的代码要比其他代码简单得多:
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]
}
它们现在更新了页面,因此页面上的所有内容都应该是最新的。
问题
这种写法存在的问题:
- toGMTString() 已被弃用
- 如果 cookie 中包含分号,则此操作无效。
- 为什么这么复杂?使用 date.setDate(date.getDate() + days); 代替
- 对我来说,eraseCookie 函数不起作用(FireFox 开发人员版 66.0b4)。相反,我不得不使用 B T 答案中的代码:document.cookie = name + ‘=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/’。
- 在 cookie 值中使用分号(;)时,我遇到了问题。因此我改进了一些行。请在答案中更新。From function setCookie(name,value,days) document.cookie = name + “=” + (encodeURIComponent(value) || “”) + expires + “; path=/”; From function getCookie(name) if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length)); 在 retutn 语句中使用 encodeURIComponent(), decodeURIComponent();
- not work with \n
这些参考资料要好得多:
从这些参考资料中得出的例子:
// 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 库,你可以使用它。
Cookie 相关规定
涉及使用 Cookie 的法律或法规包括:
- 欧盟通用数据隐私法规(GDPR)
- 欧盟的电子隐私权指令
- 加州消费者隐私法
这些规定具有全球影响力。它们适用于这些司法管辖区的用户访问的万维网上的任何站点(欧盟和加利福尼亚,但请注意,加利福尼亚州的法律仅适用于总收入超过 2500 万美元的实体)。
这些法规包括以下要求:
- 向用户表明你的站点使用 cookie。
- 允许用户选择不接收某些或所有 cookie。
- 允许用户在不接收 Cookie 的情况下使用大部分服务。
可能还存在其他法规来管理你当地的 Cookie。你有责任了解并遵守这些规定。有些公司提供“cookie banner”代码,可帮助你遵守这些法规。
在浏览器中存储信息的其他方式
在浏览器中存储数据的另一种方法是 Web Storage API。window.sessionStorage 和 window.localStorage 属性与持续时间中的会话和永久 cookie 相对应,但是存储限制比 cookie 大,并且永远不会发送到服务器。可以使用 IndexedDB API 或基于它构建的库来存储更多结构化的数据。
它们在设计时就考虑到了存储问题,从不向服务器发送数据,也没有使用 cookie 存储的其他缺点:
- 浏览器通常限制每个域的最大 cookie 数量(因浏览器而异,一般为数百个)和每个 cookie 的最大大小(通常为 4KB)。存储 API 可以存储更大的数据量。
- 每次请求都会发送 Cookie,因此 Cookie 可能会降低性能(例如在移动数据连接速度较慢的情况下),尤其是在设置了大量 Cookie 的情况下。
有一些技术旨在在 cookie 被删除后重新创建它们。这些被称为“僵尸”cookie。这些技术违反了用户的隐私和用户控制原则,可能违反数据隐私法规,并可能使使用它们的网站承担法律责任。