Cookie 可让您在网页中存储用户信息。
Cookie 是存储在您计算机上的小文本文件中的数据。
当网络服务器将网页发送到浏览器时,连接就会关闭,并且服务器会忘记有关用户的所有信息。
Cookie 的发明是为了解决问题"how to remember information about the user":
Cookie 以名称-值对的形式保存,例如:
username = John Doe
当浏览器从服务器请求网页时,属于该页面的 cookie 会添加到请求中。通过这种方式,服务器获取有关用户的 "remember" 信息的必要数据。
如果您的浏览器关闭了本地 cookie 支持,则以下示例均无效。
JavaScript 可以使用以下命令创建、读取和删除 cookiedocument.cookie
属性。
使用 JavaScript,可以像这样创建 cookie:
document.cookie = "username=John Doe";
您还可以添加到期日期(以 UTC 时间表示)。默认情况下,关闭浏览器时会删除 cookie:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
通过路径参数,您可以告诉浏览器该cookie属于哪个路径。默认情况下,cookie 属于当前页面。
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
使用 JavaScript,cookie 可以这样读取:
let x = document.cookie;
document.cookie
将返回一个字符串中的所有 cookie,类似于: cookie1=value; cookie2=值; cookie3=值;
使用 JavaScript,您可以像创建 cookie 一样更改 cookie:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
旧的 cookie 被覆盖。
删除cookie非常简单。
删除 cookie 时不必指定 cookie 值。
只需将过期参数设置为过去的日期即可:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
您应该定义 cookie 路径以确保删除正确的 cookie。
如果您不指定路径,某些浏览器将不允许您删除 cookie。
这个document.cookie
属性看起来像普通的文本字符串。但事实并非如此。
即使你将整个cookie字符串写入document.cookie,当你再次读取它时,你只能看到它的名称-值对。
如果您设置新的 cookie,旧的 cookie 不会被覆盖。新的 cookie 被添加到 document.cookie 中,因此如果您再次读取 document.cookie,您将得到类似以下内容的信息:
cookie1 = 值; cookie2 = 值;
如果要查找某个指定 cookie 的值,则必须编写一个 JavaScript 函数来在 cookie 字符串中搜索 cookie 值。
在下面的示例中,我们将创建一个存储访问者姓名的 cookie。
访问者第一次访问该网页时,系统会要求他/她填写他/她的姓名。然后该名称将存储在 cookie 中。
下次访问者到达同一页面时,他/她将收到一条欢迎消息。
对于示例,我们将创建 3 个 JavaScript 函数:
首先,我们创建一个function
将访问者的姓名存储在 cookie 变量中:
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
示例解释:
上述函数的参数是 cookie 的名称 (cname)、cookie 的值 (cvalue) 以及 cookie 过期的天数 (exdays)。
该函数通过将 cookiename、cookie 值和过期字符串相加来设置 cookie。
然后,我们创建一个function
返回指定 cookie 的值:
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
功能解释:
将 cookiename 作为参数 (cname)。
使用要搜索的文本 (cname + "=") 创建一个变量(名称)。
解码cookie字符串,以处理带有特殊字符的cookie,例如'$'
将 document.cookie 以分号分割成一个名为 ca 的数组 (ca = demodCookie.split(';'))。
循环遍历 ca 数组 (i = 0; i < ca.length; i++),并读出每个值 c = ca[i])。
如果找到 cookie (c.indexOf(name) == 0),则返回 cookie 的值 (c.substring(name.length, c.length)。
如果未找到 cookie,则返回 ""。
最后,我们创建检查 cookie 是否已设置的函数。
如果设置了 cookie,它将显示一条问候语。
如果未设置cookie,则会显示一个提示框,询问用户的姓名,并通过调用以下方法将用户名cookie存储365天:setCookie
功能:
function checkCookie() {
let username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
亲自试一试 »
上面的例子运行checkCookie()
页面加载时的函数。
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!