html-cookie
html-cookie
what
- “cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school
- 从JavaScript的角度看,cookie 就是一些字符串信息。这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息。
- 由于 cookie 多用在客户端和服务端之间进行通信,所以除了JavaScript以外,服务端的语言也可以存取 cookie。
浏览器参数
Name | Value | Domain | Path | Expires/Max Age | Size | HttpOnly | Secure | SameSite | SameParty | Priority |
---|
大小
cookie 是有大小限制的,每个 cookie 所存放的数据不能超过4kb
,如果 cookie 字符串的长度超过4kb,则该属性将返回空字符串。
生命周期
- 默认情况下,cookie 在浏览器关闭时删除
- 如果想要 cookie 能在浏览器关掉之后还可以使用,就必须要为该 cookie 设置有效期,也就是 cookie 的失效日期。
- expires(以 UTC 或 GMT 时间)
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
路径 - path
path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。
- 默认情况下,只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问
- 这个是因为安全方面的考虑,造成不是所有页面都可以随意访问其他页面创建的 cookie。
rules
- 设置cookie——js设置path要以"/"开头,比如html路径为"/zt/20160623/",路径可以设置成"/"或"/zt"。
- 获取cookie——使用js只能获取path大于等于当前页面path的cookie,比如html路径为/zt/20160623/,使用js只能获取“/zt/20160623/”和“/zt”和“/”路径下的cookie。不能获取其他路径下的cookie
- 删除cookie——删除cookie的时候路径也必须相同,默认的路径是html的path路径。
- 错误——如果path不是以"/"开头的则创建cookie的path使用默认的path;如果是以"/"开头但是设置错了,路径名不存在或者直接设置成子路径。比如设置成"/20160623"或者"/zt1",该cookie将不会被创建,并且后续对cookie的操作不论正确与否都会被浏览器禁止。
example
在 "http://www.xxx.com/xxx/" 这个页面创建一个cookie,那么在"/xxx/"这个路径下的页面如: "http://www.xxx.com/xxx/archive/2011/11/07/Cookie.html"这个页面默认就能取到cookie信息。
可在默认情况下, "http://www.xxx.com"或者 "http://www.xxx.com/xxxx/" 就不可以访问这个 cookie
那么如何让这个 cookie 能被其他目录或者父级的目录访问类,通过设置 cookie 的路径就可以实现。
document.cookie = "name=value;path=http://www.xxx.com"
document.cookie = "name=value;expires=date;path=http://www.xxx.com/xxxx/"
最常用的例子就是让 cookie 在跟目录下,这样不管是哪个子页面创建的 cookie,所有的页面都可以访问到了
document.cookie = "name=Darren;path=/"
路径能解决在同一个域下访问 cookie 的问题
域 - domain
- 因为浏览器是个注意安全的环境,所以不同的域之间是不能互相访问 cookie 的(当然可以通过特殊设置的达到 cookie 跨域访问)。
同域之间访问
document.cookie = "name=value;path=path;domain=[domain]"
rules
- 设置cookie——设置cookie的时候,domain要符合域名的规则,比如可以设置成www1.pclady.com.cn和pclady.com.cn 但是不能设置成pclady。要有.com.cn或者其他域名做结尾。 通过js手动设置cookie的domain都是以.开头的。比如设置domain=pclady.com.cn,实际的domain名为.pclady.com.cn;删除cookie时加不加.都可以。
- 获取cookie——js只能获取domian大于等于当前页面域名的cookie。比如http://www1.pclady.com.cn/zt/20160623/testCookie.html页面中的js能获取domain为“www1.pclady.com.cn”和“.www1.pclady.com.cn”和“.pclady.com.cn”但是获取不到“g.pclady.com.cn”中的cookie;
- 删除cookie——要删除一个cookie,domain值必须跟要删除cookie的domain相同,默认的domain为html文件的domain。
- 跨域domain——js不可以把cookie设置成不同与html域名的domian。cookie设置不会成功,但不会影响后面程序对cookie的操作。
- 错误——如果domain设置错误,该cookie将不会被创建,并且后续对cookie的操作不论正确与否都会被浏览器禁止。
example
例如 "www.qq.com" 与 "sports.qq.com" 公用一个关联的域名"qq.com",我们如果想让 "sports.qq.com" 下的cookie被 "www.qq.com" 访问,我们就需要用到 cookie 的domain属性,并且需要把path属性设置为 "/"。例:
document.cookie = "username=Darren;path=/;domain=qq.com"
注:一定的是同域之间的访问,不能把domain的值设置成非主域的域名。
安全性 - secure
通常 cookie 信息都是使用HTTP连接传递数据,这种传递方式很容易被查看,所以 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要,那么就要求使用加密的数据传输。
所以 cookie 的这个属性的名称是“secure”,默认的值为空。如果一个 cookie 的属性为secure,那么它与服务器之间就通过HTTPS或者其它安全协议传递数据。语法如下:
document.cookie = "username=Darren;secure"
把cookie设置为secure,只保证 cookie 与服务器之间的数据传输过程加密,而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密,得自己加密数据。
注:就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息,所以说到底,别把重要信息放cookie就对了
js 操作
创建/修改
document.cookie="username=John Doe";
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
// Error 只能单条创建
document.cookie="key1=value;key2=value;"; // key1=value;
修改 cookie 类似于创建 cookie,旧的 cookie 将被覆盖。
读取
document.cookie
document.cookie 将以字符串的方式返回所有的 cookie,类型格式:
cookie1=value; cookie2=value; cookie3=value;
删除
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:
删除时不必指定 cookie 的值。
document.cookie = "username=;";
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
常见问题
类型
- 当前网站本身设置的 cookie
- 网页上嵌入广告或图片等其他域来源的 第三方 cookie (网站可通过使用这些 cookie 跟踪你的使用信息)
状态
- 临时性质
浏览器关闭后这些信息也会从计算机中删除 - 失效时间
浏览器关闭了,这些信息业依然会在计算机中。如 登录名称和密码,这样无须在每次到特定站点时都进行登录。这种cookie 可在计算机中保留几天、几个月甚至几年
清除方式
- 浏览器工具清除 cookie (有第三方的工具,浏览器自身也有这种功能)
- 设置 cookie 的有效期来清除 cookie
注:删除 cookie 有时可能导致某些网页无法正常运行
else
- 浏览器设置来接受和拒绝访问 cookie。
- 出于功能和性能的原因考虑,建议尽量降低 cookie 的使用数量,并且要尽量使用小 cookie。
- 本地磁盘中的页面,chrome的控制台是无法用JavaScript读写操作 cookie 的,解决办法...换一个浏览器
- 要删除一个cookie,domain和路径必须完全相同。
- 页面能访问那些cookie跟从哪里引入js没有关系。而跟html页面本身的domain和path有很直接的关系
Cookie 字符串
名/值对形式存储
- typeof document.cookie = string
document.cookie 属性看起来像一个普通的文本字符串,其实它不是。
- 即使在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时,cookie 信息是以名/值对的形式展示的。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; // 'username=John Doe';
- 设置了新的 cookie,旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中,所以如果您重新读取document.cookie,您将获得如下所示的数据:
document.cookie="key1=value1;"; // key1=value1;
document.cookie="key2=value2;"; // key1=value1;key2=value2;
查找一个指定 cookie 值,您必须在 cookie 字符串中查找 cookie 值。
特殊符号处理
在输入cookie信息时不能包含空格,分号,逗号等特殊符号,而在一般情况下,cookie 信息的存储都是采用未编码的方式。所以,在设置 cookie 信息以前要先使用escape()函数将 cookie 值信息进行编码,在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。
这样就不用担心因为在cookie值中出现了特殊符号而导致 cookie 信息出错了。
document.cookie = name + "="+ escape (value)
// getCookie()
return unescape(document.cookie.substring(c_start,c_end))
uitls
function setCookie(cname, cvalue, days) {
var expires = ''
if (days) {
var d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "expires=" + d.toGMTString();
}
document.cookie = cname + "=" + escape(cvalue) + "; " + expires;
}
function getCookie(cname) {
if (document.cookie.length == 0)
return ''
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) { return unescape(c.substring(name.length, c.length)); }
}
return "";
}
function getCookie1(c_name) {
if (document.cookie.length > 0) { //先查询cookie是否为空,为空就return ""
c_start = document.cookie.indexOf(c_name + "=") //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1
if (c_start != -1) {
c_start = c_start + c_name.length + 1 //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置
c_end = document.cookie.indexOf(";", c_start) //其实我刚看见indexOf()第二个参数的时候猛然有点晕,后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断
if (c_end == -1) c_end = document.cookie.length
return unescape(document.cookie.substring(c_start, c_end)) //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节
}
}
return ""
}
function checkCookie(key) {
var value = document.cookie
if (key)
value = getCookie(key)
if (value && value != "") {
alert((key || 'Cookie') + ':' + value);
} else {
value = prompt("请输入" + (key || 'Cookie') + ':', "");
if (value != "" && value != null) {
setCookie(key || value, value);
}
}
}