js里cookie操作

原生js操作cookie

创建和存储 cookie

在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时,他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时,他们就会收到欢迎词。

首先,我们会创建一个可在 cookie 变量中存储访问者姓名的函数:

function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setTime(exdate.getTime()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。

setTime() 方法以毫秒设置 Date 对象,时间戳13位。这里如果要设置为30天,则expiredays为30*24*60*60*1000;也可以使用exdate.setDate(exdate.getDate()+expiredays),expiredays直接使用天数。

在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。

注意,如果执行setCookie('test', 123)之后,默认的cookie状态是:

name:test
value: 123
domain: www.cnblogs.com
path: /52fhy/p/
expires: Session(即关闭当前会话cookie就失效了)
size:6

所以实际情况下,我们还得设置domain,path,expires。文章后面提供优化方法。

获取cookie

之后,我们要创建另一个函数来检查是否已设置 cookie。

function getCookie(c_name){
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1){
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return ""
}

上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些
cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。

获取所有cookie

console.log(document.cookie); 

删除cookie

function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

指定可访问cookie的路径

默认情况下,如果在某个页面创建了一个cookie,那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录,则在子
目录中也可以访问。例如在www.xxxx.com/html/a.html中所创建的cookie,可以被www.xxxx.com/html
/b.html或www.xxx.com/ html/ some/c.html所访问,但不能被www.xxxx.com/d.html访问。

为了控制cookie可以访问的目录,需要使用path参数设置cookie,语法如下:

document.cookie="name=value; path=cookieDir"; 

其中cookieDir表示可访问cookie的目录。例如:

document.cookie="userId=320; path=/shop"; 

就表示当前cookie仅能在shop目录下使用。

如果要使cookie在整个网站下可用,可以将cookie_dir指定为根目录,例如:

代码如下:

document.cookie="userId=320; path=/"; 

指定可访问cookie的主机名

和路径类似,主机名是指同一个域下的不同主机,例如:www.google.com和gmail.google.com就是两个不同的主机名。默认
情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制,其语法格式为:

document.cookie="name=value; domain=cookieDomain"; 

以google为例,要实现跨主机访问,可以写为:

document.cookie="name=value;domain=.google.com"; 

这样,所有google.com下的主机都可以访问该cookie。

domain的设置,有几点要注意:

1.在setcookie中省略domain参数,那么domain默认为当前域名。
2.domain参数可以设置父域名以及自身,但不能设置其它域名,包括子域名,否则cookie不起作用。

那么cookie的作用域:
cookie的作用域是domain本身以及domain下的所有子域名。

cookie作用域必须有效,js里包括localhost,错误的不生效。php里cookie作用域不能是localhost,设置为空或者false。

总结

cookie的处理过程比较复杂,并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作,从而实现代码的复用。

例如设置cookie,这里针对上面的进行优化:

function setCookie(c_name,value,expiredays,path, domain){
    var exdate=new Date();
    exdate.setTime(exdate.getTime()+expiredays);
    var expiredays = (expiredays==null) ? "" : ";expires="+exdate.toGMTString();
    var path = (path == null) ? ";path=/" : ";path="+path;
    var domain = (domain == null) ? "" : ";domain=."+domain;

    document.cookie=c_name+ "=" +escape(value)+expiredays + path + domain;
}

我们再次执行setCookie('test2',123,1*24*3600*1000, '/', 'cnblogs.com')之后,默认的cookie状态是:

name:test2
value: 123
domain: .cnblogs.com
path: /
expires: 不再是Session,而是具体的失效时间
size:8

当然,我们也可以使用第三方库处理。

使用第三方库操作cookie

zepto:https://github.com/kennx/Zepto-Cookie
jquery:https://github.com/carhartl/jquery-cookie

zepto版本的修改来自jquery版本。所以用法两者类似。

用法


格式: $.fn.cookie(key, value, options);

key (string), 键名.

value (string), 键值.

options (object), 设置expires, path, or domain等.

示例


$.fn.cookie('foo', 'bar'); //设置cookie

$.fn.cookie('foo'); //获取cookie

$.fn.cookie('foo', 'bar', { expires: 7 }); //设置cookie,有效期7天

可选项


{ expires : 7 } //有效期天数,若为空则设置缺省,即仅当前会话有效

{ path: '/foo' }//存储路径,若为空则设置缺省,即当前路径

{ domain: 'example.com' } //域名,若为空则设置缺省,即当前域名

{ secure: true } //Whether the cookie requries a secure connection (https). Defaults to false.

{ raw: true } //Whether or not to URI encode the cookie value. Defaults to false.
时间: 2024-12-23 09:45:56

js里cookie操作的相关文章

JS封装cookie操作函数实例(设置、读取、删除)_javascript技巧

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: /*设置cookie*/ function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; }; /*使用方法:setCookie('user', 'simon', 11);*/ /*获取c

js对cookie操作教程:写入/删除/读取cookie

文章简介:js对cookie的写入,读取及删除. /*name:cookie 名value:cookie 值*///写入cookiefunction SetCookie(name,value){var Days = 30; //此 cookie 将被保存 30 天var exp = new Date();exp.setTime(exp.getTime() + Days*24*60*60*1000);document.cookie = name + "="+ escape (value)

JavaScript中Cookie操作实例_javascript技巧

JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据). Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取. Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt   有两种类型的cookie: (1)持久性cookie,会被存储到客户端的硬盘上. (2)会话Cookie

js、jsp操作cookie 有啥区别。

问题描述 js.jsp操作cookie 有啥区别. 我以前没咋用过cookie,这次要用到,搜了搜,发现jsp.js 都可以读写cookie,感觉很神奇,客户端的东西jsp也能搞...是咋搞的?,还是我太菜了,理解不到. 解决方案 jsp操作cookie也是把命令送到客户端,由客户端来执行操作cookie的,并不是jsp直接操作的客户端 解决方案二: 真正的cookie是前台浏览器的东西,别的操作只是接应方便处理而以 php也有$_cookie 服务端真正用到的是session

JS保存和删除cookie操作 判断cookie是否存在_基础知识

有时我们需要用cookie保存用户名,记录登录状态,如何正确判断该机用户cookie是否存在呢?不能简单使用a!="这样的写法. 复制代码 代码如下:  a=getCookie("username3"); c_start=document.cookie.indexOf("username3="); if(c_start == -1){  $("#login_form").show();     $("#logined"

js cookie操作(读取、删除、设置、过期)

今天我们来写如何用js来设置cookie.读取cookie.删除cookie.本文代码来自网络,并附上网页常见的使用cookie换肤案例供学习. 设置cookie  代码如下 复制代码 function setCookie(name, value,days) { //三个参数,一个是cookie的名子,一个是值,最后一个是天数 var exp = new Date();    //new Date("December 31, 9998"); exp.setTime(exp.getTim

前端要革命?看我在 JS 里写 SQL

在日新月异的前端领域中,前端工程师能做的事情越来越多,自从nodejs出现后,前端越来越有革了传统后端命的趋势,本文就再补一刀,详细解读如何在js代码中执行标准的SQL语句 为什么要在JS里写SQL? 随着业务复杂度的增长,前端页面可能出现一些数据逻辑复杂的页面,传统的js逻辑处理起来比较复杂,我们先看两个例子: 比如多规格多库存商品界面,难点在于颜色分类.尺码.价格.库存.限购数量以及对应的图片展示之间有复杂的逻辑关系,用户进行不同的选择时,js要经过多次复杂的查询才能算出结果 比如地区联动查

深入解析javascript与asp.net对Cookie操作的异同,以及如何共用(一)。

原文 http://www.cnblogs.com/leleroyn/archive/2012/02/22/2362746.html 在网站开发过程中,不管是前台用javascript还是在后台用服务器端语言处理cookie,是作为一个web开发者都必须要熟练掌握的技能. 相信大家在开发过程中都经常用到.然而如何让前端和后端同时获取同一份cookie我们还是需要花费上点心思. 下面我将着重介绍下这方面的见容: 1,首先多们用js向网站写入一cookie(单键值的比较容易,我这里只讲述下一个coo

js cookie-关于js设置cookie问题

问题描述 关于js设置cookie问题 cookie设置不进去. $(""#button_login"").click(function(){ SetCookie(""111""111""); }); function SetCookie(namevalue){var Days = 30; //此 cookie 将被保存 30 天var exp = new Date();exp.setTime(exp.ge