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 相关文章推荐
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
javascript读写json示例
Apr 11 Javascript
Javascript 构造函数详解
Oct 22 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
Feb 28 Javascript
react中hook介绍以及使用教程
Dec 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
node网页分段渲染详解
2016/09/05 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
实现Python与STM32通信方式
2019/12/18 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python request中文乱码问题解决方案
2020/09/17 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
40岁生日感言
2014/02/15 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
解析python中的jsonpath 提取器
2022/01/18 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS