JavaScript数据存储 Cookie篇

站长资源 2024/11/16 佚名

74 1538 74

相思资源网 Design By www.200059.com

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"));  // 报错，因为已经被删除

以上就是本文的全部内容，希望对大家的学习有所帮助。

js,数据存储,Cookie

标签：

js,数据存储,Cookie

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“JavaScript数据存储 Cookie篇”

暂无JavaScript数据存储 Cookie篇的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

JavaScript数据存储 Cookie篇

js,数据存储,Cookie

js跨域资源共享基础篇

JavaScript实现简单的拖动效果

评论“JavaScript数据存储 Cookie篇”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

JavaScript数据存储 Cookie篇

js,数据存储,Cookie

js跨域资源共享 基础篇

JavaScript实现简单的拖动效果

评论“JavaScript数据存储 Cookie篇”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

js跨域资源共享基础篇

RTX 5090要首发性能要翻倍！三星展示GDDR7显存