浅谈Cookie

Posted 2020-08-20

    Cookie是一小段文本信息，伴随着用户请求和页面在web服务器和浏览器之间进行传递。用户每次访问站点时,web应用程序都可以读取Cookie里包含的信息。假设在用户请求访问 您的网站上的某个页面时，您的应用程序发送给该用户的不仅仅是一个页面，还有一个包含日期和时间的 Cookie。用户的浏览器在获得页面的同时还得到了这个 Cookie。

     谷歌浏览器不支持本地cookie缓存，只支持服务器cookie缓存。火狐ie浏览器既支持本地cookie缓存，也支持服务器cookie缓存。  

     cookie在性质上是绑定在特定域名下的。当设置了一个cookie之后，再给创建它的域名发送请求时都会包含这个cookie,这个限制保证了存储在cookie中的信息只能被批准的接受者访问，而无法被其他域访问。

     由于cookie本地缓存在客户端计算机上，还加入了一些限制确保cookie不会被恶意使用，同时不会占据太多的磁盘空间。每个域的cookie总数是有限制的，不过浏览器之间各有不同。

•    IE6以及更低版本限制每个域名最多20个cookie。
•    IE7以及之后的版本每个域名最多50个。
•    Firefox限制每个域最多50个cookie.
•    Opera限制每个域最多30个cookie.
•    Safari和Chrome对于每个域的cookie数量限制没有硬性规定。

     浏览器对于cookie的尺寸也有限制。大多数浏览器都有大约4096B(加减1)的长度限制。为了最佳的浏览器兼容性，最好将整个cookie长度限制在4095B以内。尺寸限制影响到一个域下所有的cookie,而并非每个cookie单独限制。

    完整的cookie结构:cookie由一堆固定的键/值对组成 name=value;[expires=date];[path=path][domain=somewhere.com];[secure];其中name=value都是自定义的，是必须有的。后续的其他键值对按需求进行参加，而且一条cookie只能存一条信息。

document.cookie="username=litongxue";
document.cookie="password=12345";

 需要注意的是cookie取值时将键值对同时取出。如果从浏览器加载页面，那么当前cookie缓存分栏的名字是由主机的名字命名，如果是本地加载文件，缓存分栏是没有名字的。

  expires过期时间，值是一个日期对象，如果当前时间刚好是该日期对象的时间或者是过去的时间，那么cookie过期，清除过期的cookie。如果该键不设置，默认是当前回话结束时消失（在关闭浏览器后，cookie缓存就会自动清除。

//获取n天后某一天的日期对象;
  function getDate(n){
  var oDate=new Date();
  var num=oDate.getDate();
  oDate.setDate(num+n);
  return oDate;
}

  path 限制访问路径，如果不设置path这个属性,如果本地加载的文件,路径是文件在磁盘上的存储路径,如果是服务器加载的文件,路径是文件在服务器上的文件路径。我们可以设置路径,但是必须保证设置路径以后,文件存储的实际路径,必须和存储cookie的路径一致,否则访问cookie失败。

document.cookie = "username=lifei;expires=" + getDate(2) + ";path=/Users/tianyufei/Desktop/%E9%9D%92%E5%B2%9B1602%E7%8F%AD/13cookie/code/";

alert(document.cookie);

  domain 限制访问域名，如果不设置,默认是加载当前文件的服务器的主机名，如果设置的域名,和加载当前文件的域名不一致的,cookie缓存失败。

document.cookie = "username=lifei;expires=" + getDate(2) + ";domain=lifei.localXX";

   secure 加密链接访问,如果不设置的话,当前cookie默认任意类型的连接都可以进行访问,如果设置了,当前cookie 仅限加密连接 可以进行访问。

document.cookie = "username=tianyufei;expires=" + getDate(2) + ";secure";

    cookie缓存时候,我们可以将中文部分进行转码,转成对应的字符编码,再进行存储。这时候会用到encodeURIComponent(str)进行编码，编码后进行存储。读取的时候要相应的

用到decodeURIComponent(str)进行解码。

encodeURIComponent(str) //编码
decodeURIComponent(str)//解码
//str为需要编码解码的字符串；

    以下是我简单封装的设置cookie、读取cookie以及删除cookie的几个方法;

    设置cookie

function setCookie(name, value, expires, path, domain, isSecure){
            //声明空字符串,用户cookie的拼接
            var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
            if(expires){
                cookieText += ";expires=" + expires;
            }
            if(path){
                cookieText += ";path=" + path;
            }
            if(domain){
                cookieText += ";domain=" + domain;
            }
            if(isSecure){
                cookieText += ";secure";
            }
            //设置当前cookie
            document.cookie = cookieText;
        }

    读取cookie;

   

 function getCookie (name) {
        var cookieText=decodeURIComponent(document.cookie);
        var start=cookieText.indexOf(name);
        if (start == -1) {
            return;
        }else{
         var end=cookieText.indexOf(";",start);
         if (end == -1) {
          end=cookieText.length;
         }
        }
      var  subStr=cookieText.substring(start,end);
      var arr=subStr.split("=");
      return arr[1];
     }

  删除cookie的原理就是设置cookie的时候设置相同的cookie名称然后过期的时间，这样cookie就会被覆盖并删除。

   

        function removeCookie(name){
            //一个name只能存储一条cookie,如果重复存储,后一条就会将前一条覆盖掉
            //给一个过期时间
        setCookie(name, "", new Date(0));
        }

   最后提醒一下，一定不要在cookie中存储重要的和敏感的数据。cookie数据并非存储在一个安全的环境中，其中包含的任何数据都可以被他人访问。哈哈，今天的分享就到这里，

希望大家喜欢。