Cookies使您可以将信息存储在用户的Web浏览器中。
Cookie是一个小型文本文件,可让您在用户计算机上存储少量数据(近4KB)。
Web服务器将网页发送到浏览器后,连接将关闭,并且服务器会忘记有关用户的所有信息。
发明了Cookies来解决“如何记住有关用户的信息”的问题。
Cookies可用于跟踪信息,例如用户喜好,当用户下次访问网站时,网站可以检索该信息以个性化页面。
Cookies以“名称=值”对的形式保存,例如:
username = Seagull
当浏览器从服务器请求网页时,属于该页面的cookie被添加到请求中。这样,服务器将获得必要的数据以“记住”有关用户的信息。
注意:请勿在Cookie中存储敏感数据,例如密码或信用卡信息,因为恶意用户可能会操纵它们。
在JavaScript中,您可以使用document.cookie属性创建,读取和删除Cookie 。
可以这样创建一个cookie:
document.cookie = "username=Seagull";
您还可以添加到期日期(以UTC时间为单位)。默认情况下,关闭浏览器时会删除cookie:
document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC";
使用path参数,您可以告诉浏览器cookie属于哪个路径。默认情况下,cookie属于当前页面:
document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";
在JavaScript中,可以这样读取cookie:
var x = document.cookie;
读取cookie稍微复杂一点,因为该document.cookie属性仅返回一个包含分号和所有cookie的空格分隔列表的字符串(例如,名称=值对,例如cookie1 = value; cookie2 = value; cookie3 = value)。为了从此列表中获取单个cookie,您需要使用split()方法将其分成单个name = value对,并搜索特定名称。
此字符串不包含属性,如expires,path,domain,等,可能已经为Cookie集。
改变或修改一个cookie的唯一方法是创建一个具有相同的另一种饼干name和path为现有的。
document.cookie = "username=Ankit; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";
注意:创建具有相同name但不同的cookie path不会更改现有的cookie,而是会添加一个额外的cookie。
删除Cookie非常容易。删除Cookie:
只需再次使用相同的设置name,指定一个空值
或将expires参数设置为经过的日期
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
请记住,如果您path为cookie 指定了或其他属性,则在删除它时还需要包括它们。
在下面的示例中,我们将创建一个存储用户名的cookie。
用户首次访问该网页时,将要求他/她填写其姓名。然后将该名称存储在cookie中。
下次用户访问同一页面时,他/她将获得存储在cookie中的值。
对于示例,我们将创建2个JavaScript函数:
设置cookie值的功能
获取Cookie值的函数
首先,我们创建一个将访问者的姓名存储在cookie变量中的函数。
function setCookie(cname, cvalue) { var now = new Date(); now.setMonth(now.getMonth() + 1); var expires = "expires="+ now.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; }测试看看‹/›
上面函数的参数是cookie的名称(cname)和cookie的值(cvalue)。
该函数通过将cookie名称,cookie值和expires字符串(1个月)加在一起来设置cookie。
然后,我们创建一个显示指定cookie值的函数。
function getCookie(cname) { var allcookies = document.cookie; cookieArr = allcookies.split(';'); for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if(cname == cookiePair[0].trim()) { document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]); } } }测试看看‹/›
此函数将cookie名称作为参数(cname)。
获取所有cookie(allcookies = document.cookie)。
将分号上的document.cookie拆分为名为cookieArr的数组(cookieArr = allcookies.split(';'))。
遍历cookieArr数组(i = 0; i <cookieArr.length; i ++),并读出每个值(cookiePair = cookieArr [i])。
如果找到了cookie(cname == cookiePair [0]),则写入cookie的键和值(cookiePair [0],cookiePair [1])。
function setCookie(cname, cvalue) { var now = new Date(); now.setMonth(now.getMonth() + 1); var expires = "expires="+ now.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { var allcookies = document.cookie; cookieArr = allcookies.split(';'); for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if(cname == cookiePair[0].trim()) { document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]); } } }测试看看‹/›
Cookies是具有5个属性的纯文本数据记录:
属性 | 描述 |
---|---|
Name=Value | Cookies以键值对的形式设置和检索 |
Expires | Cookie到期的日期。如果为空,则cookie将在访问者退出浏览器时过期 |
Domain | 您网站的域名 |
Path | 设置cookie的目录或网页的路径。如果要从任何目录或页面检索cookie,则该字段可以为空白 |
Secure | 如果此字段包含单词“ secure”,则只能使用安全服务器检索cookie。如果此字段为空,则不存在此类限制 |