首页 >web前端 >js教程 >用Js操作HTTP的Cookie的实现步骤

用Js操作HTTP的Cookie的实现步骤

php中世界最好的语言原创: 2017-12-02 11:00:022541浏览

我们知道，cookie是有有效期的，cookie的默认有效期是在从cookie生成后一直到浏览器关闭，我们可以设置cookie的有效期来指定它的失效期，用户也可以禁止cookie也可以手动的删除cookie。

cookie是一小段信息，以键/值对的信息保存在计算机硬盘上的字符串， cookie存储容量大概在4kb，不同的浏览器厂家对cookie大小的限制有微微的差异；cookie主要的本质是“识别”，通过识别来做一些事情;cookie 也是无法从你的硬盘取得任何其它数据，传送电脑病毒或者获取你的电子邮件地址。cookie是有有效期的，cookie的默认有效期是从cookie生成至浏览器关闭，也可以通过设置cookie的有效期来指定其失效日期；用户也可以禁止cookie也可以手动删除cookie。

cookie是字符串而且还是一个特定格式的文本字符串

格式：cookieName=cookieValue;expires=expiresDate;path=URLpath;domain=siteDomain//cookie名称，失效日期，储存URL,储存域值；

cookie的创建方式
设置cookie我们一般都封装成一个函数：

复制代码代码如下:

function addCookie(sName,sValue,day) { 
var expireDate = new Date(); 
expireDate.setDate(expireDate.getDate()+day);; 
//设置失效时间 
document.cookie = escape(sName) + &#39;=&#39; + escape(sValue) +&#39;;expires=&#39; + expireDate.toGMTString();6 //escape()汉字转成unicode编码,toGMTString() 把日期对象转成字符串 
}

读取cookie
添加了cookie之后，我们如何来获取它呢，很简单：

复制代码代码如下:

function getCookies() { 
var showAllCookie = &#39;&#39;; 
if(!document.cookie == &#39;&#39;){ 
var arrCookie = document.cookie.split(&#39;; &#39;); 
//用spilt(&#39;; &#39;)切割所有cookie保存在数组arrCookie中 
var arrLength = arrCookie.length; 
for(var i=0; i<arrLength; i++) { 
showAllCookie += &#39;c_name:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[0]) + &#39;c_value:&#39; + unescape(arrCookie[i].split(&#39;=&#39;)[1]) + &#39;<br>&#39; 9 } 
return showAllCookie; 
} 
}

cookie有有效期可自动删除，也可以通过设置其失效日期来立即删除

一样很简单,继续：

复制代码代码如下:

function removeCookie() { if(document.cookie != &#39;&#39; && confirm(&#39;你想清理所有cookie吗？&#39;)) { var arrCookie = document.cookie.split(&#39;; &#39;); var arrLength = arrCookie.length; var expireDate = new Date(); expireDate.setDate(expireDate.getDate()-1); for(var i=0; i<arrLength; i++) { var str = arrCookie[i].split(&#39;=&#39;)[0]; document.cookie = str+ &#39;=&#39; + &#39;;expires=&#39; + expireDate.toGMTString(); } } }

我们已经知道如何创建、获取、删除cookie了，现在也该运用cookie了

下面我们用cookie做一个简单的计时器：

复制代码代码如下:

var cookieCount = {}; cookieCount.count = function () { var count = parseInt(this.getCount(&#39;myCount&#39;)); count++; document.cookie = &#39;myCount=&#39; + count + &#39;&#39;; alert(&#39;第&#39;+count+&#39;访问&#39;); } cookieCount.setCount= function () { //首先得创建一个名为myCount的cookie var expireDate = new Date(); expireDate.setDate(expireDate.getDate()+1); document.cookie = &#39;myCount=&#39; + &#39;0&#39; +&#39;;expires=&#39; + expireDate.toGMTString(); } cookieCount.getCount = function (countName) { //获取名为计数cookie,为其加1 var arrCookie = document.cookie.split(&#39;; &#39;); var arrLength = arrCookie.length; var ini = true; for(var i=0; i<arrLength; i++) { if(countName == arrCookie[i].split(&#39;=&#39;)[0]){ return parseInt(arrCookie[i].split(&#39;=&#39;)[1]); break; }else{ ini = false; } } if(ini == false)this.setCount(); return 0; } cookieCount.count();

cookie的路径

本文开头的时候提到cookie的路径设置 cookie的路径：path=URL;

如果在域名的子目录创建的cookie，域名及其他同级目录或上级目录是访问不到这个cookie的，而通过设置路径的好处就是可以上域名以及域名的子类目录都可以访问到，如下：

document.cookie=&#39;cookieName=cookieValue;expires=expireDate;path=/&#39;。

cookie域

设置域：domain=siteDomain

这个主要用在同域的情况下共享一个cookie，例如 "www.taobao.com" 与 "ued.taobao.com" 两者是共享一个域名"taobao.com"，我们如果想让 "www.taobao.com" 下的cookie被 "ued.taobao.com" 访问，那么就需要把path属性设置为 "/"，并且设置 cookie 的

domain-->document.cookie=&#39;cookieName=cookieValue;expires=expireDate;path=/;domain=taobao.com&#39;。

随着web的不断发展项目中的需要，HTML5提供了两个属性window.sessionStorage和window.localStorage,并携带了setItem,getItem,removeItem,clear等方法，使得本地存储数据的方法操作更为简单便利

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！