28. Cookie和存储
一、cookie是什么?
cookie,是在客户端用于存储会话信息的。Cookie 是一些数据, 存储于你电脑上的文本文件中。Cookie 以名/值对形式存储,如下所示:
<xmp>
username=John Doe
</xmp>
二、cookie的构成
cookie 由浏览器保存的以下几块信息构成。
参数 | 描述 |
---|---|
名称: | 一个唯一确定 cookie 的名称。cookie 名称是不区分大小写的。cookie 的名称必须是经过 URL 编码的。 |
值: | 储存在 cookie 中的字符串值。值必须被 URL 编码。 |
作用域: | cookie 对于哪个域是有效的。 |
路径 | 对于指定域中的那个路径,应该向服务器发送 cookie。例如,你可以指定 cookie 只有从http://www.wrox.com/books/ 中才能访问,那么 http://www.wrox.com 的页面就不会发送 cookie 信息,即使请求都是来自同一个域的。 |
失效时间: | 表示 cookie 何时应该被删除的时间戳,默认情况下,浏览器会话结束时即将所有 cookie 删除; |
安全标志: | 指定后,cookie 只有在使用 SSL 连接的时候才发送到服务器。 |
浏览器中对于 cookie 的尺寸也有限制。大多数浏览器都有大约 4096B(加减 1)的长度限制。为了最佳的浏览器兼容性,最好将整个 cookie 长度限制在 4095B(含 4095)以内。
可以通过navigator.cookieEnabled来检测浏览器是否支持cookie
<xmp>
if(navigator.cookieEnabled == true){
console.log('cookie ok');
}
</xmp>
三、创建cookie
<xmp>
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
</xmp>
username=John Doe:名称和对应值
expires:过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除
path:路径,对于指定域中的那个路径
四、修改cookie
<xmp>
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
</xmp>
旧的 cookie 将被覆盖。
五、读取cookie
<xmp>
var x = document.cookie;
</xmp>
document.cookie 将以字符串的方式返回所有的 cookie,类型格式: cookie1=value; cookie2=value; cookie3=value;
六、删除cookie
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可,如下所示,设置为 Thu, 01 Jan 1970 00:00:00 GMT:
<xmp>
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
</xmp>
注意,当您删除时不必指定 cookie 的值。
七、实例
<xmp>
var Cookie = {
get: function (name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" +
encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
};
//设置 cookie
Cookie.set("name", "Nicholas");
Cookie.set("book", "Professional JavaScript");
//读取 cookie 的值
alert(Cookie.get("name")); //"Nicholas"
alert(Cookie.get("book")); //"Professional JavaScript"
//删除 cookie
Cookie.unset("name");
Cookie.unset("book");
</xmp>
评论
共0 条评论