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判断元素为数字的奇异写法分享
Aug 01 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
浅析javascript的return语句
Dec 15 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
vue treeselect获取当前选中项的label实例
Aug 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设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python continue继续循环用法总结
2018/06/10 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Python变量类型知识点总结
2019/02/18 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
Keras自定义IOU方式
2020/06/10 Python
pycharm永久激活超详细教程
2020/10/29 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
销售经理竞聘书
2014/03/31 职场文书
活动总结模板
2014/05/09 职场文书
前台接待岗位职责
2015/02/03 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
植物园观后感
2015/06/11 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang