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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jquery 插件学习(一)
Aug 06 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
Vuex的实战使用详解
Oct 31 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
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python正则表达式常用函数总结
2017/06/24 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Python 如何展开嵌套的序列
2020/08/01 Python
Django nginx配置实现过程详解
2020/09/10 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
车队司机自我鉴定
2014/03/02 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
乐山大佛导游词
2015/02/02 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
2022微信温控新功能上线
2022/05/09 数码科技