js基础篇——cookie使用要点

1.Cookie数量和长度的限制。各个浏览器的限制不同IE7+和Firefox最大限制为50条，chrome和Safari无限制，IE6-最大限制20条。且所有浏览器限制每个cookie长度不能超过4KB，否则会被截掉。

　　所以：现代浏览器cookie个数不要超过50条，大小不能超过4KB；简而精。

2.安全性问题。客服端每次访问服务端都会携带cookie，cookie容易被人拦截，所有的session信息被公开。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

　　所以：cookie不要保存机密信息，让服务端来确保用户信息安全。

3.关于cookie的编码。原来的cookie编码大多使用escape和unescape进行编解码，这个编解码针对普通字母和数字以及*，+，-，.，/，@，_以外的其他字符，可以说是比较简单粗暴的。后来ECMAScript v3 已从标准中删除了escape进行编码，分解成了encodeURI（针对URL风格进行编码）和 encodeURIComponent（针对URL风格编码加上URI 组件的标点符号进行编码，比encodeURI要编码的字符更多）。一般来说cookie编码只需要能对"="和";"进行编码即可。

　　所以在不能使用escape的情况下使用encodeURIComponent编码,decodeURIComponent解码。

4.cookie每次随HTTP请求一起发送，浪费宽带，移动端推荐使用localStorage。

5.使用方法

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

　　每执行一次上面的代码就会添加一个cookie，如果cookie中已经存在相同name的cookie则完全覆盖（这里的覆盖不仅仅只value值的覆盖，指的是覆盖一切当前name对应的cookie信息，比如失效时间expires属性、path属性等等）。

　　一次只能添加一个cookie，除了第一个key/value对被认为是cookie值保存外，其他key/value对被认为是该cookie的属性。比如

document.cookie = "name=chua;expires="+(new Date("2016/1/6 11:44:30")).toGMTString();

　　上面的代码被解释为cookie name在2016/1/6 11:44:30到期的

document.cookie = "name=chua;age=12";

　　上面的代码解释为添加了一个cookie name=chua。这个cookie有一个属性age=12。但是很明显，age在cookie中没有意义。因为cookie除了本身的键和值能获取到，他相关的属性无法读取，只有浏览器知道。

　　现在来说说cookie的几个属性（不详细讲，主要是使用的注意事项）：

　　expires:绝对失效时间，时间格式只支持GTM标准时间，所有浏览器都支持

　　默认情况下cookie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户退出浏览器后这些值也会丢失；如果指定 expires 值，那么如果在时间没有过期的情况下cookie始终存在，即使关闭浏览器、关闭电脑。例子

document.cookie = "name=chua;expires="+(new Date("2016/1/6 11:44:30")).toGMTString();

　　max-age：相对失效时间，格式是数字，单位秒

　　说是expires现在已经被max-age属性所取代，但是实际上本人测试至少IE是不支持max-age的。所以，max-age的使用范围就只能说抱歉了。max-age和expires这两个属性控制cookie生命周期。 如果两个都设置了，以max-age为准

　　path：指定与cookie关联在一起的网页

　　在默认的情况下cookie会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联

　　domain:指定共享该cookie的域，只能是一个域内多个服务器共享cookie

　　domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。

　　news.baidu.com的服务器能够读取www.baidu.com设置的cookie值。如果www.baidu.com的页面创建的cookie把自己的path属性设置为“/”，把domain属性设置成“.baidu.com”，那么所有位于www.baidu.com，以及位于baidu.com域的其他服务器上的网页都可以访问这个cookie。

　　secure:布尔值,传输类型（安全传输false/不安全传输true），默认是不安全传输

　　它是一个布尔值，指定在网络上如何传输cookie，默认是不安全的，通过一个普通的http连接传输

　　HttpOnly：设为true后，只能通过http访问，不能通过document.cookie获取。设定为httponly的键值,防止xss读取cookie。

　　

　　简易cookie读取函数

function getCookie(c_name){
        var cookie = document.cookie;
        if (cookie.length>0){
                c_start = cookie.indexOf(encodeURIComponent(c_name) + "=");
                if (c_start!=-1){
                        c_start = c_start + c_name.length+1;
                        c_end = cookie.indexOf(";",c_start);
                        if (c_end==-1) c_end = cookie.length;
                        return decodeURIComponent(cookie.substring(c_start,c_end))
            }
          }
        return ""
}
function setCookie(c_name,value,expiredays){
        var exdate = new Date()
        exdate.setDate(exdate.getDate()+expiredays);
        document.cookie = encodeURIComponent(c_name)+ "=" + encodeURIComponent(value)+
                ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

　　如果觉得本文不错，请点击右下方【推荐】！