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查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
js实现简单数字变动效果
Nov 06 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP实现文件下载详解
2014/11/27 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
全面解析标签页的切换方式
2016/08/21 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Vue底层实现原理总结
2018/02/17 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
Python 转义字符详细介绍
2017/03/21 Python
Scrapy的简单使用教程
2017/10/24 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
python使用RNN实现文本分类
2018/05/24 Python
python是否适合网页编程详解
2019/10/04 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
副董事长岗位职责
2014/04/02 职场文书
校园文明标语
2014/06/13 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
股东授权委托书
2014/10/15 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android