起首先让我们简朴地相识一下cookie.
在我们制造网页的过程当中，常常须要把信息从一个页面传递给另一个页面，这时候就须要用到JavaScript中的cookie机制了。简朴说来，cookie供应了一种便利的体式格局，能够在用户的盘算机上保留少许数据而且长途取得它们，从而让网站能够保留一些细节信息，比方用户的习气设置或是上一次接见网站的时候。cookie自身是一些短小的信息，能够由页面保留在用户的盘算机上，然后被其他页面读取。cookie平常都设置为在肯定时候后失效。
固然，cookie也有范围的地方：浏览器关于能够保留的cookie数目有所限定，一般是几百个或许多一点。平常状况下，每一个域名20个cookies是许可的，而每一个域最多能保留4KB的cookie.除了大小限定能够致使的题目，也有许多缘由会引起硬盘上的cookie消逝，比方到达有效期限了，或是用户清理了cookie信息，或是换用了其他浏览器。因而，cookie不合适用来保留主要数据，在编写代码时也要考虑到cookie猎取非常的处置惩罚要领。
在JavaScript中，运用document对象的cookie属性来贮存和猎取cookie.一般，document.cookie里的信息是由成对的称号和值构成的字符串，每一对数据的情势是：
name=value;
下面我们将经由过程一个简朴的例子来展如今JavaScript中怎样读取和写入cookie.
起首是createCookie.html，在该页面中会建立一个cookie,完全的代码以下：
<html>
<head>
<title>createCookie</title>
<script>
function createCookie(){
//get name and password
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
//create cookie
document.cookie = name+'|'+pwd;
//go to showCookie.html page
window.location.href = "showCookie.html";
}
</script>
</head>
<body>
Userame: <input id="name" type="text" /><br><br>
Password: <input id="pwd" type="password" /><br><br>
<button onclick="createCookie()">Submit</submit>
</body>
</html>该页面的截图以下：
点击submit按钮，就会建立一个cookie，在该cookie中保留了Username和Password信息，而且会跳转到showCookie.html页面。个中，showCookie.html页面的完全代码以下：
<html>
<head>
<title>showCookie</title>
<script>
function showCookie(){
//document.cookie is a string, using split() function to get cookie date in array form
var arr = document.cookie.split('|');
//processing data in cookie
var cookie_info = 'Data in cookie:<br>username is: '+arr[0]+"<br>password is: "+arr[1]+'<br>';
//set content of element of id "res"
document.getElementById("res").innerHTML = cookie_info;
}
</script>
</head>
<body>
<button onclick="showCookie()">Show Cookie</button>
<p id="res"></p>
</body>
</html>页面截图以下：
点击show Cookie按钮就会显现cookie内里的信息了。
下面，我们将会在当地和服务器上分别跑这个顺序，分别在IE浏览器和Chrome浏览器上运转这个顺序，看看cookie的运转状况。
起首我们在当地运转这个顺序，我们将上述两个文件都放在E盘中。先在IE浏览器上运转，在createCookie.html页面上输入信息，并点击submit按钮，截图以下：
跳转到showCookie.html页面后，点击show Cookie按钮，页面截图以下：
cookie在当地环境中的IE浏览器中运转一般。
接下来，我们看看在Chrome浏览器中运转状况，起首在Chrome浏览器中翻开createCookie.html页面，输入信息，并点击submit按钮，截图以下：
跳转到showCookie.html页面后，点击show Cookie按钮，页面截图以下：
一样的顺序，此次cookie在Chrome浏览器中却运转失利了。
接着让我们在服务器中运转这个顺序，须要用到xampp,并翻开Apache服务器，将上述两个html文件放在xampp安装文件夹下的htdocs文件夹下（详细的操作要领能够参考这篇博客：JavaScript之运用AJAX（合适初学者））。我们如今IE浏览器中运转该顺序，在IE浏览器中输入网址：http://localhost/createCookie…：
点击Submit按钮，跳转到showCookie.html页面，并点击show Cookie按钮，截图以下：
然后我们在Chrome浏览器中输入网址：http://localhost/createCookie…：
点击Submit按钮，跳转到showCookie.html页面，并点击show Cookie按钮，截图以下：
此次在服务器环境下，IE浏览器和Chrome浏览器的cookie都运转一般！
本次分享到此结束，迎接人人交换~~
