首先，在介绍如何使用JS来操作cookie之前，我们先了解一下什么是cookie，cookie出现的背景是什么，以及cookie的应用。

Cookie介绍

    cookie是浏览器提供的一种机制，浏览器将document对象的cookie属性交给javascript调用，可以由javascript对其控制，因此cookie不是javascript本身的性质，而是属于浏览器的机制。

    cookie是存在于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器每次访问这个域名的时候，便可以使用这个cookie，因此，cookie可以跨越一个域名下的多个网页，但是不能跨越多个域名使用。

    不同的浏览器对于cookie的实现是不一样的，但是性质是相同的。例如在windows2000以及XP系统下，cookie文件存储于documents and settings\username\Cookies文件夹中。

Cookie应用 

    cookie机制将信息存储于硬盘中，因此可以作为全局变量来使用，这也是它最大的一个优点。

    cookie的主要应用场合：

    （1）保存用户登录状态。例如将用户ID和密码存储在一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区网站都支持这样的体验。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失，因此系统往往可以提示用户可以保持登录状态的时间，常见选项有一个月、三个月、一年等。

    （2）跟踪用户行为。比如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地，那么对于用户来说是很繁琐的，当利用了cookie之后就会显得很人性化，系统会记录上一次访问的地区，当下次再打开该页面时，系统自动显示用户上次所选择地区的天气情况，用户体验会相当好。因为一切都是在后台完成的，丝毫不用用户做任何交互，这样的页面就像为某个用户定制的一样，使用起来非常方便。

    （3）定制页面。如果某个网站提供了换肤或者更换布局的功能，那么可以使用cookie来记录用户的选项，例如背景色、分辨率等。用户下次访问时，仍然可以保存上一次访问的界面风格。

    （4）创建购物车。这是应用的较为广泛的地方。用户将购物车中的商品保存到cookie中，在结账的时候可以统一提交。

Cookie缺点

    Cookie的缺点主要集中于安全性和隐私，分为如下几种。

    （1）cookie可能被禁用，当用户非常注重个人隐私时，他很可能禁用浏览器Cookie功能。

    （2）cookie是与浏览器相关的，这也意味着，即使访问的是同一个页面，不同浏览器之间的cookie也是不能互相访问的。

    （3）cookie有可能会被删除。因为cookie是硬盘上的一个文件，因此很有可能被用户删除。

    （4）cookie安全性不高。所有的cookie信息都是以纯文本形式记录于文件中。因此如果要保存用户名和密码等敏感信息时，最好先进行加密处理。

Cookie限制

    大多数浏览器支持最多可达 4096 字节的 Cookie，如果要将为数不多的几个值保存到用户计算机上，这一空间已经足够大，但您不能用一个 Cookie 来保存数据集或其他大量数据。在实际应用中，您可能并不希望在 Cookie 中保存大量的用户信息，而只希望保存用户编号或其他标识符。之后，当用户再次访问站点时，就可以使用该用户 ID 在数据库中查找用户的详细信息。

    浏览器还限制了站点可以在用户计算机上保存的 Cookie 数。大多数浏览器只允许每个站点保存 20 个 Cookie。如果试图保存更多的 Cookie，则最先保存的 Cookie 就会被删除。还有些浏览器会对来自所有站点的 Cookie 总数作出限制，这个限制通常为 300 个。

    最可能遇到的 Cookie 限制是：用户可以设置自己的浏览器，拒绝接受 Cookie。很难解决这个问题，除非完全不使用 Cookie 而是通过其他机制来保存用户相关信息。保存用户信息的一种常用方法是会话状态，但会话状态又依赖于 Cookie。

    更一般的经验很可能是，尽管 Cookie 在应用程序中非常有用，应用程序也不应该依赖于能够保存 Cookie。利用 Cookie 可以做到锦上添花，但不要利用它们来支持关键功能。如果应用程序必须使用 Cookie，则可以通过测试来确定浏览器是否接受 Cookie。

=========================================================================================

上面讲述了cookie的一些背景应用知识，现在步入正题，讲讲如何使用javascript操作cookie。

添加Cookie

    每个cookie都是一个键/值对，可以把下面这样的一个字符串赋值给cookie。  

//一次存储一个键值对
document.cookie="UserId=123";

    设置多个键值对有两种方式：

    （一）

//一次存储多个键值对时采用;加空格符号隔开，如下，这种做法是网上比较多的写法，我自己试了一下，不可用，仅仅能保存第一个键值对。
document.cookie="UserId=123; PassWord=456";(X)

    这种方式仅仅能保存第一个键值对，达不到保存多个键值对的效果，所以这种写法同学们一定要避免哦！

    为什么会这样呢？

    这是因为在cookie 的键或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。所以，我们上面代码中有分号有空格，就会产生错误。

    那么我们该如何处理呢，我们处理的方法是使用escape（）函数进行编码。把特殊字符都表示成为%xx的形式，其中xx是十六进制数。比如说空格经过escape（）方法编码以后返回"%20"。在读取值时，我们用unescape()方法进行解码，可以还原为我们想设置的样式。如下所示：

//设置cookie
function setCookie(name1,value1,name2,value2) {
document.cookie=name1+escape("="+value1+"; ")+name2+escape("="+value2);
}
//显示cookie
function showCookie() {
if (document.cookie)
{
    var ck = unescape(document.cookie);
    alert(ck);
}
else
{
alert("cookie不存在");
}
}

 

  （二）

//一次存储多个键值的另一种方式，这种方式可以实现多个键值对的存储
document.cookie="UserId=123";
document.cookie="PassWord=456"

    前面讲到，在cookie 的键或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的键中做到这点很容易，但对应的值是不确定的。如何来存储这些值呢？方 法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用这种方法还可以避免中文乱码的出现。例如：

document.cookie="username="+escape("张三");

    “张三”经过escape编码后的值为“%u5F20%u4E09”；所以上面的语句相当于

document.cookie="username=%u5F20%u4E09";

     当使用escape进行编码之后，在取cookie值的时候，需要用unescape进行解码，如下

      //参数name，代表cookie的键
      function GetCookie(name)
      {
        var strCookie=document.cookie;
        var arrCookie=strCookie.split("; ");
        for(var i=0;i<arrCookie.length;i++)
         {
           var arr=arrCookie[i].split("=");
           if(arr[0]==name)return unescape(arr[1]);
         }
        return "";
      }

    需要注意的是，虽然document.cookie看上去像一个属性，可以赋不同的值，但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值。

    例如：连续执行下面两条代码

document.cookie="userid=zs";
document.cookie="username=zhangsan";

   执行完之后，浏览器将维护两个cookie，分别是userid和username。如果要改变一个cookie的值，只需要把这个cookie重新赋值一下即可，如下：

document.cookie="userid=ls";

    这样userid这个cookie值就变为了ls。

==========================================================================================

    今天就写到这里，下篇将为大家介绍如何利用javascript获取，删除cookie，并执行一些其他操作。

    谢谢大家耐心看完这篇文章，希望能对您有所帮助。