javascript 操做Cookie

时间 2019-12-18

标签 javascript cookie 栏目 JavaScript 繁體版

原文原文链接

一、javascript说明javascript

Cookie 基础知识html

cookie 是有大小限制的，每一个 cookie 所存放的数据不能超过4kb，若是 cookie 字符串的长度超过4kb，则该属性将返回空字符串。
因为 cookie 最终都是以文件形式存放在客户端计算机中，因此查看和修改 cookie 都是很方便的，这就是为何常说 cookie 不能存放重要信息的缘由。
每一个 cookie 的格式都是这样的：<cookie名>=<值>；名称和值都必须是合法的标示符。
每一个网站下面最多保存20个cookie,20个cookie是20个键值对，
cookie 是存在有效期的。在默认状况下，一个 cookie 的生命周期就是在浏览器关闭的时候结束。若是想要 cookie 能在浏览器关掉以后还可使用，就必需要为该 cookie 设置有效期，也就是 cookie 的失效日期。
alert(typeof document.cookie)　　结果是 string，曾经我觉得是array，还闹过笑话…囧
cookie 有域和路径这个概念。域就是domain的概念，由于浏览器是个注意安全的环境，因此不一样的域之间是不能互相访问 cookie 的(固然能够经过特殊设置的达到 cookie 跨域访问)。路径就是routing的概念，一个网页所建立的 cookie 只能被与这个网页在同一目录或子目录下得全部网页访问，而不能被其余目录下得网页访问（这句话有点绕，一会看个例子就好理解了）。
其实建立cookie的方式和定义变量的方式有些类似，都须要使用 cookie 名称和 cookie 值。同个网站能够建立多个 cookie ，而多个 cookie 能够存放在同一个cookie 文件中。
Cookie 常见问题
- cookie 存在两种类型：
1. 你浏览的当前网站自己设置的 cookie
2. 来自在网页上嵌入广告或图片等其余域来源的第三方 cookie (网站可经过使用这些 cookie 跟踪你的使用信息)
- 刚刚基础知识里面有说到 cookie 生命周期的问题，其实 cookie 大体可分为两种状态：
1. 临时性质的cookie。当前使用的过程当中网站会储存一些你的我的信息，当浏览器关闭后这些信息也会从计算机中删除
2. 设置失效时间的cookie。就算浏览器关闭了，这些信息业依然会在计算机中。如登陆名称和密码，这样无须在每次到特定站点时都进行登陆。这种cookie 可在计算机中保留几天、几个月甚至几年
- cookie 有两种清除方式：
1. 经过浏览器工具清除 cookie (有第三方的工具，浏览器自身也有这种功能)
2. 经过设置 cookie 的有效期来清除 cookie
3. 注：删除 cookie 有时可能致使某些网页没法正常运行
- 浏览器能够经过设置来接受和拒绝访问 cookie。
- 出于功能和性能的缘由考虑，建议尽可能下降 cookie 的使用数量，而且要尽可能使用小 cookie。
- 关于cookie编码的细节问题将会在cookie高级篇中单独介绍。
- 假如是本地磁盘中的页面，chrome的控制台是没法用JavaScript读写操做 cookie 的，解决办法…换一个浏览器。

javascript设置cookiejava

document.cookie="username=zhangsan";//设置cookiechrome

设置cookie的有效期跨域

咱们在开始说cookie的生命周期也就是有效期和失效期，即cookie的存在时间。在默认状况下,cookie会在浏览器关闭的时候自动清除，可是咱们能够经过expires俩设置cookie的有效期，语法以下：数组

document.cookie="name=value;expires=date";浏览器

上面的时间生成方法以下：安全

var d=new Date();//获得当前时间服务器

d.setDate(d.getDate()+30);//d.getDate()获得本地月份的某一天，接着加上30,就是但愿cookie能在本地保存30天，而后经过使用setDate()来设置时间cookie

d.toDateString();//将其转化为字符创，并返回结果

下面经过一个完整的函数来讲一下：

 
       function 
       setCookie(c_name, value, expiredays){  
      
       　　　var 
       exdate=new 
       Date();  
      
       　　　exdate.setDate(exdate.getDate() + expiredays);  
      
       　　　document.cookie=c_name+ "=" 
       + escape(value) + ((expiredays==null) ? "" 
       : ";expires="+exdate.toGMTString());  
      
       }  
      
       使用方法：setCookie('username','Darren',30) 
      
       在这儿也能够不使用三目运算符， 
      
       var tmp+=c_name+"="+escape(value); 
      
       if(expiredays) 
      
       tmp+=" ;expires="+exdate.toDateString(); 
      
       上面例子是咱们安装天数来设置cookie的，若是想要安装小时设置cookie，则以下： 
      
       exdate.setHours(exdate.getHours()+expiredays); 
      
       其余，年，月，分同上。

一.cookie 路径概念

　　在基础知识中有提到 cookie 有域和路径的概念，如今来介绍路径在 cookie 中的做用。

　　cookie 通常都是因为用户访问页面而被建立的，但是并非只有在建立 cookie 的页面才能够访问这个 cookie。

　　默认状况下，只有与建立 cookie 的页面在同一个目录或子目录下的网页才能够访问，这个是由于安全方面的考虑，形成不是全部页面均可以随意访问其余页面建立的 cookie。举个例子：

　　在 "http://www.cnblogs.com/Darren_code/" 这个页面建立一个cookie，那么在"/Darren_code/"这个路径下的页面如： "http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"这个页面默认就能取到cookie信息。

　　可在默认状况下， "http://www.cnblogs.com"或者 "http://www.cnblogs.com/xxxx/" 就不能够访问这个 cookie（光看没用，实践出真理）。

　　那么如何让这个 cookie 能被其余目录或者父级的目录访问类，经过设置 cookie 的路径就能够实现。例子以下：

 
         document.cookie = "name=value;path=path" 
        
         document.cookie = "name=value;expires=date;path=path"

红色字体path就是 cookie 的路径，最经常使用的例子就是让 cookie 在跟目录下,这样不论是哪一个子页面建立的 cookie，全部的页面均可以访问到了:

 
         document.cookie = "name=Darren;path=/"

　二.cookie 域概念

　　路径能解决在同一个域下访问 cookie 的问题，我们接着说 cookie 实现同域之间访问的问题。语法以下：

 
         document.cookie = "name=value;path=path;domain=domain"

　　红色的domain就是设置的 cookie 域的值。

　　例如 "www.qq.com" 与 "sports.qq.com" 公用一个关联的域名"qq.com"，咱们若是想让 "sports.qq.com" 下的cookie被 "www.qq.com" 访问，咱们就须要用到 cookie 的domain属性，而且须要把path属性设置为 "/"。例：

 
         document.cookie = "username=Darren;path=/;domain=qq.com"

注：必定的是同域之间的访问，不能把domain的值设置成非主域的域名。

　　三.cookie 安全性

　　一般 cookie 信息都是使用HTTP链接传递数据，这种传递方式很容易被查看，因此 cookie 存储的信息容易被窃取。假如 cookie 中所传递的内容比较重要，那么就要求使用加密的数据传输。

　　因此 cookie 的这个属性的名称是“secure”，默认的值为空。若是一个 cookie 的属性为secure，那么它与服务器之间就经过HTTPS或者其它安全协议传递数据。语法以下：

 
         document.cookie = "username=Darren;secure"

　　把cookie设置为secure，只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。若是想让本地cookie也加密，得本身加密数据。

　　注：就算设置了secure 属性也并不表明他人不能看到你机器本地保存的 cookie 信息，因此说到底，别把重要信息放cookie就对了，囧…

　　四.cookie 编码细节

　　本来来想在常见问题那段介绍cookie编码的知识，由于若是对这个不了解的话编码问题确实是一个坑，因此仍是详细说说。

　　在输入cookie信息时不能包含空格，分号，逗号等特殊符号，而在通常状况下，cookie 信息的存储都是采用未编码的方式。因此，在设置 cookie 信息之前要先使用escape()函数将 cookie 值信息进行编码，在获取到 cookie 值得时候再使用unescape()函数把值进行转换回来。如设置cookie时：

 
         document.cookie = name + "="+ escape (value)

再看看基础用法时提到过的getCookie()内的一句：

 
         return 
         unescape(document.cookie.substring(c_start,c_end))

这样就不用担忧由于在cookie值中出现了特殊符号而致使 cookie 信息出错了。

读取Cookie

经过分隔分号加空格符号，就能够得到各个 cookie，再经过分隔等号，就能够得出各个 cookie 的名称和值。

　　cookie 的子键，只是表如今 cookieValue 上，一个子键的结构是：子键名称=子键值，多个子键之间用 & 链接起来。好比：

　　cookieName1=子键名称1=子键值1&子键名称2=子键值2

document.cookie = "N1=1; path=/path/";

document.cookie = "N1=2; path=/paTH/";

同名的 cookie，不一样的 domain 或不一样的 path，属不一样的 cookie；

　　同名的 cookie，相同的 domain 且相同的 path，不一样的 expires，属同一个 cookie。

　　cookie 有路径－－path，表示哪些路径下的文件有权限读取该 cookie。

　　path 应该以 "/" 结尾，同名 cookie，不一样 path，属不一样的 cookie

 
       document.cookie = "N1=1; path=/path/";   
      
       document.cookie = "N1=2; path=/paTH/";

 
       document.cookie = "N1=1; path=/path/";   
      
       document.cookie = "N1=2; path=/paTH/";

　　这是两个不一样的 cookie，由于　path 属性值大小写不一样，若是咱们在地址栏输入的是 path，那么就读取第一个 N1，若是咱们输入的是 paTH，那么就读取第二个 N1

　　path 不可读

　　同 expires 同样，path 只可写，不可读。

　　path 不可更改

　　同 expires 不同，若是咱们试图更改 path，那么实际上咱们是另外写了一个 cookie，而不是更改了 path 值。

　　path 权限有继承性

　　假如指定了 /test/ 目录有权限读取某 cookie，那么 /test/ 之下的目录 /test/t/ 也有权限读取该 cookie。

　　cookie 有失效日期－－expires，若是尚未过失效期，即便从新启动电脑，cookie 仍然不会丢失，若是没有指定 expires 值，那么在关闭浏览器时，cookie 即失效。

在 JS(JavaScript) 中使用 expires 时应该和 cookie 同时写入，如：

 
      双击代码全选 
     
         document.cookie = "clr=red; expires=" 
         + expiresDate; 
        
    document.cookie = "clr=red; expires=" + expiresDate;

双击代码全选
1	`document.cookie =` `"clr=red; expires="` `+ expiresDate;`

　　而以下写法是不正确的：

 
      双击代码全选 
     
         document.cookie = "clr=red";   
        
         document.cookie = "expires=" 
         + expiresDate; 
        
    document.cookie = "clr=red";  
   
 document.cookie = "expires=" + expiresDate;

双击代码全选
1 2 3	`document.cookie =` `"clr=red";` `document.cookie =` `"expires="` `+ expiresDate;`

　　这样写会造成两个 cookie，第二个 cookie 的名称是 expires，两个 cookie 均没有指定失效日期。

　　expires 不可读

设置多个cookie

//设置多个cookie

function SetMultiCookie() {
            var d = new Date();
            d.setFullYear(2013, 1, 10);
            var d1 = new Date();
            d1.setFullYear(2013, 8, 15);
            var d2 = new Date();
            d2.setMonth(6, 10);
            document.cookie = "username=zhan" + ";expires=" + d.toDateString();
            document.cookie = "uname=wangwu123;"+";;expires=" + d.toDateString()+";";
            document.cookie = "firstname=zhangsan "+";;"+";expires=" + d1.toDateString()+";";
            document.cookie = "lastname=qiangqi"+";"+";;expires=" + d2.toDateString();

        }

function SetOneCookie() {
            var d = new Date();
            d.setFullYear(2013, 1, 10);
            var d1 = new Date();
            d1.setFullYear(2013, 8, 15);
            var d2 = new Date();
            d2.setMonth(6, 10);
            document.cookie += "username=zhan" + ";expires=" + d.toDateString();
            document.cookie += "uname=wangwu123;"+";;expires=" + d.toDateString()+";";
            document.cookie += "firstname=zhangsan "+";;"+";expires=" + d1.toDateString()+";";
            document.cookie += "lastname=qiangqi"+";"+";;expires=" + d2.toDateString();

        }

        function GetMultiCookie() {
            var cookies = document.cookie;
            alert(cookies);//若是是多个cookie则每一个cookie使用";"分割，一个cookie则直接读取
            alert(cookies.length);
        }

删除cookie，则是经过设置一个过时的时间，或者给一个空值在从新写一下

javascript 操做Cookie

Cookie 高级篇