【js学习笔记-104】-----客户端存储cookie

客户端存储---cookie

cookie数据会自动在web浏览器和Web服务器之间传输，因此服务端脚本就可以读、写存储在客户端的cookie值。操作cookie的API很早就已经定义和实现，因此该API兼容性很好。便，该API几乎形同虚设。根本没有提供诸如查询、设置、删除cookied的方法，所有这些操作都要通过以特殊格式的字符串形式读写Document对象的cookie属性来完成。每个cookie的有效期和作用域都可以通过cookie属性来分别指定。这些属性也是通过在同一个cookie属性上以特殊格式的字符串来设定的

javascript代码中使用cookie前，首先要确保cookie是启用的。在绝大多数浏览器中，可以通过检测navigator.cookieEnable这个属性来实现。若该值为true，则当前cookie是启用，否则为禁用。但这个属性不是标准属性。因此在不支持该属性的浏览器上，必须通过使用下面介绍的技术尝试读写删除来测试是否支持cookie。

cookie属性：有效期和作用域

   cookie默认的有效期很短暂；它只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就会丢失了。要注意的是：这与sessionStorage的有效期还是有区别的：cookie的作用域并不是局限在浏览器的单个窗口中，它的有效期，可以通过设置max-age属性，但是必须要明确告诉浏览器cookie的有效期是多少（单位秒）一旦设置了有效期，浏览器就会将cookie数据存储在一个文件中，并且直到过了指定的有效期才会删除该文件。

cookie的作用域是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的web页面有关，并对该web页面以及和该web页面同目录或者子目录的其他web页面可见。默认的cookier的可见行为满足了最觉的需求。不过，有时候，你可能希望记整个网站都能够使用cookie的值，而不管是哪个页面创建的。比方说，当用户在一个页面表单中输入了他的邮件地址，你想将它保存下来，为了下次该用户回到这个页面填写表单，或者在网站其他页面的任何地方要求输入帐单地址的时候，将其作为默认的邮件地址。要满足这样的需要，可以设置cookie的路径。（设置cookie的path属性）这样一来，来自同一个web服务器的web页面，只要其url是以指定的路径前缀开始的，都可以共享cookie。如cookie的path调协为”/”,那么该cookie对任何该网站的页面都是可见的。将路径设置成”/”就等于是让cookie和localStorage拥有同样的作用域同时当它请求该站点上任何一个web页面的时候，浏览器都必须将cookie的名字和值传递给服务器。但是，要注意的是，cookie的path属性不能被用做访问控制机制。如果一个web页面想要读取同一站点其他页面的cookie，只要简单地将其他页面以隐藏<iframe>的形式加载进来，随后读取对应文档的cookie就可以听，同源策略限制了跨站的cookie窥探。但是对于同一站点的文档它是完全合法的。

如果一个大型网站的子域想要访问主域上的cookie。这时通过设置cookie的domain属性来达到目的。如果catalog.example.com域下的一个页面创建了一个cookie，并将其path属性设置成”/”,其domain属性设置成”.example.com”，那么该cookie就对所有catalog.example.com ,orders.example.com以及任何其它example.com域下的任何其它服务器都可见。

cookie的属性是secure，它是一个布尔类型的属性，用来表明cookie的值以何种形式通过网络传递。默认是以不安全形式，而一旦cookie被标识”安全的”，那就只能当浏览器和服务器通过https或者其他的安全协议连接的时候才能传递它。

保存cookie

要给当前文档设置有效期的cookie值，非常简单，只须将cookie属性设置为一个字符串形式的值：name=value

   如：document.cookie = “version=”+encodeURIComponent(document.lastModified);

因为cookie名值中的值是不允许包含分号、逗号、和空白 所有使用encodeURIComponent。当要get它的值时要使用decodeURIComponent();

设置cookie的有效期，按如下字符串设置cookie属性即可：

name =value; max-age = seconds

 

设置cookie值，同时提供一个可选的max-age

function  setcookie(name,value,daysToLive){

      var cookie = name+”=”+ encodeURIComponent(value);

       if(typeof daysToLive===”number”)cookie+=”;max-age=”+(daysToLive*60*60*24);

        document.cookie = cookie;

 }

 

同样地，如果要设置cookie的path、domain和secure属性，只须在存储cookie值前，追加如下字符串到cookie值后面

;path = path

;domain = domain

;secure

改变cookie的传值，需要使用相同的名字、路径和域，但是新的重新设置cookie的值。同样地，设置新max-age属性就可以改变原来的cookie的有效期

删除一个cookie，需要使用相同的名字、路径和域，然后指定一个任意（非空）的值，并且将max-age属性指定为0，再次设置cookie

读取cookie

js表达式来读取cookie属性的时候，其返回的值是一个字符串，该字符串都是由一系列名值对组成，不同的名值对之间通过”分号和空格”分开，其内容包含了所有作用在当前文档的cookie。但是，它并不包含其他设置的cookie属性。通过document.cookie属性可以获取cookie值。但是为了更好地查看cookie的值，一般会采用split()方法将cookie值中的名/值对都分离出来。

解析document.cookie属性值

//假设存储cookie的值的时候是采用encodeURIComponent()函数编码的

  function  getcookie(){

      var cookie = {};

      var all = document.cookie;

      if(all===””)return cookie;

      var list = all.split(“;  ”);

      for(var i=0;i<list.length;i++){

          var kuki = list[i];

          var p = kuki.indexOf(“=”);

          var name = kuki.substring(0,p);

           var value = kuki.substring(p+1);

           value = decoedURIComponent(value);

           cookie[name] = value;

       }

         return cookie;

  }

 

cookie的局限性

cookie的设计初衷是给服务端脚本用来存储少量的数据的，该数据会在每次请求一个相关的URL时传递到服务器中。RFC2965鼓励浏览器供应商对cookie的数据大小不做限制。可骒，该标准不允许浏览器保存超过300个cookie，为每个web服务器保存的cookie数不能超过20个，而且，每个cookie保存的数据不能超过4k。实际上，现代浏览器允许cookie总数超过300个，但是部分浏览器对单个cookie大小仍然有4k的限制。

cookie相关的存储

例：定义一个cookieStorage函数，通过将max-age和path属性传递给该构造函数，通过将max-age和path属性传递给该构造函数，就会返回一个对象，然后就可以像使用localStorage属性或sessionStorage一样来使用这个对象。但是要注意的是，该例并没有实现存储事件，因此，当设置和查询cookieStorage对象的属性的时候，不会实现自动保存和获取对应的值。

例：实现基于cookie的存储API

function  cookieStorage(maxage,path){

       var cookie = (function(){

      var cookie = {};

      var all = document.cookie;

      if(all===””)return cookie;

      var list = all.split(“;  ”);

      for(var i=0;i<list.length;i++){

          var kuki = list[i];

          var p = kuki.indexOf(“=”);

          var name = kuki.substring(0,p);

           var value = kuki.substring(p+1);

           value = decoedURIComponent(value);

           cookie[name] = value;

       }

         return cookie;

  }());

       var keys = [];

       for(var key in cookie) keys.push(key);

       this.length= keys.length;

       this.key= function(n){

             if(n<0 || n>=keys.length)return  null;

              return keys[n];

       }

         this.getItem= function(name){

             return cookie[name] || null;

          }

          this.setItem= function(key,value){

              if(!(key in cookie)){ //如果要存储的cookie还不存在

                      keys.push(key);

                      this.length++;

               }

                cookie[key] = key+”=”+encodeURIComponent(value);

                //将cookie的属性也加入到该字符串中

                 if(maxage)cookie+=”;max-age=”+maxage;

                 if(path)cookie+=”;path=”+path;

                 document.cookie = cookie;

          } //end setItem

          //删除指定的cookie

          this.removeItem = function(key){

                 if(!(key in cookie)) return;

                 delete cookie[key];

                 //删除keys

                 for(vari=0;i<keys.length;i++){

                     if(keys[i]===key)keys.splice(i,1);

                          break;

                 }

                  this.length--;

                  //最终通过将该cookie值设置为字符串以及将有效期设置0来删除指定cookie

                   document.cookie=key+”=;max-age=0”;

            }//end removeItem

            //删除所有的cookie

            this.clear = function(){

                  for(vari=0;i<keys.length;i++)

                      document.cookie = keys[i]+”=;max-ago=0”;

                   cookie = {};

                   keys = [];

                   this.length = 0;

             }

  }