脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → cookie的读写操作

js中的cookie的读写操作示例详解

 更新时间：2014年04月17日 15:36:24   作者：  
cookie是有有效期的，cookie的默认有效期是从cookie生成至浏览器关闭，也可以通过设置cookie的有效期来指定其失效日期；用户也可以禁止cookie也可以手动删除cookie

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等方法，使得本地存储数据的方法操作更为简单便利

您可能感兴趣的文章:

相关文章

  • 微信小程序实现Session功能及无法获取session问题的解决方法

    微信小程序实现Session功能及无法获取session问题的解决方法

    这篇文章主要介绍了微信小程序实现Session功能及无法获取session问题的解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • javascript获取鼠标点击元素对象(示例代码)

    javascript获取鼠标点击元素对象(示例代码)

    本篇文章主要介绍了利用javascript获取鼠标点击元素对象的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 深入浅析Bootstrap列表组组件

    深入浅析Bootstrap列表组组件

    列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件，感兴趣的朋友一起学习吧
    2016-05-05
  • 微信小程序嵌入H5页面(web-view)的方法详解

    微信小程序嵌入H5页面(web-view)的方法详解

    使用<web-view>标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的,下面这篇文章主要给大家介绍了关于微信小程序嵌入H5页面(web-view)的相关资料,需要的朋友可以参考下
    2022-09-09
  • javascript 打印页面代码

    javascript 打印页面代码

    不用window.print实现的打印效果代码。
    2009-03-03
  • js实现九宫格的随机颜色跳转

    js实现九宫格的随机颜色跳转

    本篇文章主要介绍了js实现九宫格的随机颜色跳转的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • javascript宿主对象之window.navigator详解

    javascript宿主对象之window.navigator详解

    这篇文章主要为大家详细介绍了javascript宿主对象之window.navigator，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 关于js的事件循环机制剖析

    关于js的事件循环机制剖析

    JS事件循环机制,最常用到的地方应该是做面试题,经常给出一段代码,让你写出console.log()顺序,下面这篇文章主要给大家介绍了关于js事件循环机制的相关资料,需要的朋友可以参考下
    2021-06-06
  • 微信小程序自定义toast弹窗效果的实现代码

    微信小程序自定义toast弹窗效果的实现代码

    微信小程序里面的自带弹窗icon只有两种，success和loading。这篇文章主要介绍了微信小程序之自定义toast弹窗效果的实现代码 ,需要的朋友可以参考下
    2018-11-11
  • js的math中缺少的数学方法小结

    js的math中缺少的数学方法小结

    JavaScript Math对象包含一些真正有用且强大的数学运算,但它缺乏大多数其他语言提供的许多重要运算,例如求和,乘积,奇数和偶数等等,本文就来介绍一下
    2023-08-08

最新评论