这篇文章主要为大家介绍了 JavaScript 数据存储 Cookie 篇,感兴趣的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
1. 什么是 cookie?
答:cookie 是用于在客户端存储会话信息的。
2.cookie 的组成部分?
①名称:一个唯一确定 cookie 的名称。建议区分大小写。cookie 的名称必须是经过 URL 编码的。
②值:储存在 cookie 中的字符串值。值必须被 URL 编码。
③域:cookie 对于哪个域是有效的。所有向该域发送的请求中都会包含这个 cookie 信息。这个值可以包含子域(subdomain,如 www.wrox.com),也可以不包含它(如. wrox.com,则对于 wrox.com 的所有子域都有效)。如果没有明确设定,那么这个域会被认作来自设置 cookie 的那个域。
④路径:对于指定域中的那个路径,应该向服务器发送 cookie。例如,你可以指定 cookie 只有从 http://www.wrox.com/books/ 中才能访问,那么 http://www.wrox.com 的页面就不会发送 cookie 信息,即使请求都是来自同一个域的。
⑤失效时间:表示 cookie 何时应该被删除的时间戳。默认情况下,浏览器会话结束时即将所有 cookie 删除;不过也可以自己设置删除时间。这个值是个 GMT 格式的日期(Wdy, DD-Mon-YYYY HH:MM:SS GMT),用于指定应该删除 cookie 的准确时间。因此,cookie
可在浏览器关闭后依然保存在用户的机器上。如果你设置的失效日期是个以前的时间,则 cookie 会被立刻删除。
⑥安全标志:指定后,cookie 只有在使用 SSL 连接的时候才发送到服务器。例如,cookie 信息只能发送给 https://www.wrox.com,而 http://www.wrox.com 的请求则不能发送 cookie。
3. 列举一个 cookie 的例子?
以下是一个完整的 cookie 的例子,我们将把它分解开来:
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure
①名称: name 字符串表示
②值:value 字符串表示
③过期时间:Mon, 22-Jan-07 07:10:24 GMT
④域名:.wrox.com
⑤路径:当前目录 /
⑥安全标志:secure
4. 如何操作 cookie?
- var CookieUtil = {
- // 设置cookie
- set : function (name, value, expires, domain, path, secure) {
- var cookieText = "";
- 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;
- },
- // name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
- // 获取cookie
- get : function (name) {
- var cookieName = encodeURIComponent(name) + "=",
- cookieStart = document.cookie.indexOf(cookieName),
- cookieValue = "";
- 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;
- },
- // 删除cookie
- unset : function (name, domain, path, secure) {
- this.set(name, "", Date(0), domain, path, secure);
- }
- };
- // 测试
- CookieUtil.set("name", "zhang");
- var name = CookieUtil.get("name");
- alert(name); // zhang
- CookieUtil.unset("name");
- alert(CookieUtil.get("name")); // 空
5.cookie 的限制
①存储数据数量有限
②保了储存在 cookie 中的信息只能让批准的接受者访问,而无法被其他域访问
③安全性有限
6. 针对 cookie 数据存储少量的问题,我们提出了子 cookie 的概念。即在每条 cookie 的值中存储多条数据,用 "&" 隔开。
- var SubCookieUtil = {
- /** 设置一条完整的cookie
- * param name : 表示cookie的名称,必填
- * param subCookies : 表示cookie的值,为一个对象,必填
- * param expires : 表示cookie的过期时间,可以不填
- * param domain : 表示cookie的域名,可以不填
- * param path : 表示cookie的路径,可以不填
- * param secure : 表示cookie的安全标志,可以不填
- * eg : SubCookieUtil.setAll("info", { name : "zhang", age : 23});
- **/
- setAll: function(name, subCookies, expires, domain, path, secure) {
- var cookieText = "",
- subName, cookieParts = [];
- cookieText += encodeURIComponent(name) + "=";
- for (subName in subCookies) {
- cookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subCookies[subName]));
- }
- if (cookieParts.length > 0) {
- cookieText += cookieParts.join("&");
- if (expires instanceof Date) {
- cookieText += "; expires=" + expires.toGMTString();
- }
- if (path) {
- cookieText += "; path=" + path;
- }
- if (domain) {
- cookieText += "; domain=" + domain;
- }
- if (secure) {
- cookieText += "; secure";
- }
- } else {
- cookieText += "; expires=" + Date(0).toGMTString();
- }
- document.cookie = cookieText;
- },
- /** 设置一条子cookie
- * param name : 表示cookie的名称,必填
- * param subName : 表示子cookie的名称,必填
- * param value : 表示子cookie的值,必填
- * param expires : 表示cookie的过期时间,可以不填
- * param domain : 表示cookie的域名,可以不填
- * param path : 表示cookie的路径,可以不填
- * param secure : 表示cookie的安全标志,可以不填
- * eg : SubCookieUtil.set("info", "sex", "boy");
- **/
- set: function(name, subName, value, expires, domain, path, secure) {
- var cookies = this.getAll(name) || {};
- cookies[subName] = value;
- this.setAll(name, cookies, expires, domain, path, secure);
- },
- /** 读取一条完整cookie
- * param name : 表示cookie的名称,必填
- * return : 一个cookie对象
- * eg : SubCookieUtil.getAll("info");
- **/
- getAll: function(name) {
- var cookieName = encodeURIComponent(name) + "=",
- cookieStart = document.cookie.indexOf(cookieName),
- cookieValue = "",
- i,
- len,
- subCookies,
- parts,
- result = {};
- 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));
- if (cookieValue.length > 0) {
- subCookies = cookieValue.split("&");
- for (i = 0, len = subCookies.length; i < len; i++) {
- parts = subCookies[i].split("=");
- result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
- }
- return result;
- }
- }
- return null;
- },
- /** 获取一条子cookie的值
- * param name : 表示cookie的名称,必填
- * param subName : 表示子cookie的名称
- * return : 一个子cookie的值
- * eg : SubCookieUtil.get("info", "name");
- **/
- get: function(name, subName) {
- var cookies = this.getAll(name);
- if (cookies) {
- return cookies[subName];
- } else {
- return null;
- }
- },
- /** 删除一条完整cookie
- * param name : 表示cookie的名称,必填
- * param domain : 表示cookie的域名,可以不填
- * param path : 表示cookie的路径,可以不填
- * param secure : 表示cookie的安全标志,可以不填
- * eg : SubCookieUtil.unsetAll("info");
- **/
- unsetAll: function(name, domain, path, secure) {
- this.setAll(name, "", Date(0).toGMTString(), domain, path, secure);
- },
- /** 删除一条子cookie
- * param name : 表示cookie的名称,必填
- * param subName : 表示子cookie的名称,必填
- * param domain : 表示cookie的域名,可以不填
- * param path : 表示cookie的路径,可以不填
- * param secure : 表示cookie的安全标志,可以不填
- * eg : SubCookieUtil.unset("info", "name");
- **/
- unset: function(name, subName, domain, path, secure) {
- var cookies = this.getAll(name);
- if (cookies) {
- delete cookies[subName];
- this.setAll(name, cookies, null, domain, path, secure);
- }
- }
- };
- // 测试:
- var zhang = {
- name: "zhang",
- age: 23,
- height: "178cm",
- weight: "66kg"
- }
- // 设置一条完整的cookie
- SubCookieUtil.setAll("zhang", zhang);
- // 获取一条完整的cookie
- var zhang = SubCookieUtil.getAll("zhang");
- alert(zhang.weight); // 66kg
- // 再为张添加一个子cookie
- SubCookieUtil.set("zhang", "sport", "basketball");
- // 获取子cookie
- alert(SubCookieUtil.get("zhang", "sport")); // basketball
- // 删除一条子cookie
- SubCookieUtil.unset("zhang", "age");
- alert(SubCookieUtil.get("zhang", "age")); // undefined
- // 删除一条完整的cookie
- SubCookieUtil.unsetAll("zhang");
- alert(SubCookieUtil.getAll("zhang")); // 报错,因为已经被删除
来源: http://www.phperz.com/article/17/0304/264481.html