js中的cookie的读写操作示例详解


Posted in Javascript onApril 17, 2014

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) + '=' + escape(sValue) +';expires=' + expireDate.toGMTString();6 //escape()汉字转成unicode编码,toGMTString() 把日期对象转成字符串 
}

读取cookie

添加了cookie之后,我们如何来获取它呢,很简单:

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

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

一样很简单,继续:

function removeCookie() { 
if(document.cookie != '' && confirm('你想清理所有cookie吗?')) { 
var arrCookie = document.cookie.split('; '); 
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('=')[0]; 
document.cookie = str+ '=' + ';expires=' + expireDate.toGMTString(); 
} 
} 
}

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

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

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

cookie的路径

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

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

document.cookie='cookieName=cookieValue;expires=expireDate;path=/'。

cookie域

设置域:domain=siteDomain

这个主要用在同域的情况下共享一个cookie,例如 "www.taobao.com" 与 "ued.taobao.com" 两者是共享一个域名"taobao.com",我们如果想让 "www.taobao.com" 下的cookie被 "ued.taobao.com" 访问,那么就需要把path属性设置为 "/",并且设置 cookie 的domain-->document.cookie='cookieName=cookieValue;expires=expireDate;path=/;domain=taobao.com'。

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

Javascript 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
element中的$confirm的使用
Apr 26 Javascript
巧用replace将文字表情替换为图片
Apr 17 #Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 #Javascript
JS实现div居中示例
Apr 17 #Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 #Javascript
js调用后台、后台调用前台等方法总结
Apr 17 #Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 #Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 #Javascript
You might like
德生PL550的电路分析
2021/03/02 无线电
建立动态的WML站点(三)
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php生成二维码
2015/08/10 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
一段批量给页面上的控件赋值js
2010/06/19 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Python translator使用实例
2008/09/06 Python
pycharm安装图文教程
2017/05/02 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
解析Python的缩进规则的使用
2019/01/16 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python虚拟环境venv用法详解
2020/05/25 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
年终晚会活动方案
2014/08/21 职场文书
安全责任协议书范本
2016/03/23 职场文书