首先，让我们简单了解一下cookie。

在创建网页的过程中，我们经常需要将信息从一个页面传递到另一个页面，所以我们需要JavaScript中的cookie机制。简单来说，cookie提供了一种方便的方法，可以将少量数据保存在用户的计算机上并远程获取，这样网站就可以保存一些细节，例如用户的习惯设置或上次访问网站的时间。Cookie本身是简短的信息，可以由用户计算机上的页面保存，然后由其他页面读取。Cookie通常设置为在一定时间后过期。

当然，cookie也有局限性：浏览器会限制可以保存的cookie数量，通常是数百个或更多。正常情况下，每个域名允许20个cookie，每个域最多可以存储4KB cookies。除了大小限制带来的问题之外，还有很多原因会导致硬盘上的cookie消失，比如过期日期、用户清理cookie信息，或者切换到其他浏览器。因此，cookie不适合存储重要数据，编写代码时要考虑cookie获取异常的处理方法。

在JavaScript中，文档对象的cookie属性用于存储和获取cookie。通常，document.cookie中的信息是由成对的名称和值组成的字符串，每对数据的形式为：

名称=值；下面我们将通过一个简单的例子展示如何在JavaScript中读写cookie。

第一个是createCookie.html，在这个页面中会创建一个cookie。完整的代码如下：

html head title createCookie/title脚本函数createCookie(){//获取名称和密码var name=document . getelementbyid(' name ')。价值；var pwd=document . getelementbyid(' pwd ')。价值；//创建cookie文档. cookie=名称“|”pwd；//转到showCookie.html页面window . location . href=' show cookie . html '；}/script/headbody userame:输入id=' name ' type=' text '/brbpassword :输入id=' pwd ' type=' password '/brbrbrbutton onclick=' create cookie()' submit/submit/body/html此页面的截图如下：

单击提交按钮，将创建一个cookie，其中将保存用户名和密码信息，并跳转到showCookie.html页面。其中，showCookie.html页面的完整代码如下：

htmlhead titleshowCookie/title脚本函数showCookie(){ //document.Cookie为字符串，使用split()函数获取数组形式的cookie日期var arr=document . cookie . split(' | ')；//处理cookie var cookie _ info=' cookie : brusername中的数据为：' arr[0] 'brpassword为： ' arr[1]' br；//设置id ' RES ' document . getelementbyid(' RES ')的元素内容。innerHTML=cookie _ info}/script/head body按钮onclick=' show cookie()' show cookie/button p id=' RES '/p/body/html页面截图如下：

单击显示cookie按钮以显示Cookie中的信息。

接下来，我们将分别在本地和服务器上运行这个程序，分别在IE浏览器和Chrome浏览器上运行这个程序，看看cookie是如何工作的。

首先，我们在本地运行这个程序，我们把上面两个文件放在E盘。先在IE浏览器上运行，在createCookie.html页面输入信息，点击提交按钮。截图如下：

跳转到showCookie.html页面后，点击显示Cookie按钮，页面截图如下：

Cookie在本地环境的ie浏览器中正常运行。

接下来我们来看看Chrome浏览器中的运行情况。首先，在Chrome浏览器中打开createCookie.html页面，输入信息，点击提交按钮。截图如下：

跳转到showCookie.html页面后，点击显示Cookie按钮，页面截图如下：

同样的程序，这个cookie无法在Chrome浏览器中运行。

然后，让我们在需要xampp的服务器上运行这个程序，打开Apache服务器，将上面两个html文件放在xampp安装文件夹下的htdocs文件夹中(具体操作方法请参考本博客：JavaScript使用AJAX(适合初学者))。我们现在在IE浏览器中运行这个程序，并在IE浏览器中输入网址：http://localhost/createCookie.

单击“提交”按钮跳转到showCookie.html页面，然后单击“显示Cookie”按钮。截图如下：

然后我们在Chrome浏览器中输入网址：http://localhost/createCookie.

单击“提交”按钮跳转到showCookie.html页面，然后单击“显示Cookie”按钮。截图如下：

这次在服务器环境下，ie浏览器和Chrome浏览器的cookie运行正常！