JavaScript数据存储 Cookie篇


Posted in Javascript onJuly 02, 2016

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

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

Javascript 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
JavaScript实现简单的拖动效果
Jul 02 #Javascript
jQuery插件简单学习实例教程
Jul 01 #Javascript
jquery插件autocomplete用法示例
Jul 01 #Javascript
AngularJS 避繁就简的路由
Jul 01 #Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 #Javascript
AngularJS实现分页显示数据库信息
Jul 01 #Javascript
AngularJS内建服务$location及其功能详解
Jul 01 #Javascript
You might like
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
python中defaultdict的用法详解
2017/06/07 Python
python字典DICT类型合并详解
2017/08/17 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
python简易远程控制单线程版
2018/06/20 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python实现维吉尼亚算法
2019/03/20 Python
django的ORM操作 增加和查询
2019/07/26 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python中SQLite如何使用
2020/05/27 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
店长岗位职责
2013/11/21 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
母亲节演讲稿
2014/05/27 职场文书
2014个人年度工作总结
2014/12/15 职场文书
转让协议书
2015/01/27 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫