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 RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
基于jquery编写分页插件
Mar 07 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
基于vue和websocket的多人在线聊天室
Feb 01 Javascript
react结合bootstrap实现评论功能
May 30 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python shutil模块用法实例分析
2019/10/02 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
Python的logging模块基本用法
2020/12/24 Python
介绍一下write命令
2014/08/10 面试题
物理研修随笔感言
2014/02/14 职场文书
社区清明节活动总结
2014/07/04 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
运动员获奖感言
2014/08/15 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python