原生js操作cookie

创建和存储 cookie

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

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

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

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

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

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

在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 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,expires,path, domain){
var exdate=new Date();
exdate.setTime(exdate.getTime()+expires);
var expires = (expiredays==null) ? "" : ";expires="+exdate.toGMTString();
var path = (path == null) ? ";path=/" : ";path="+path;
var domain = (domain == null) ? "" : ";domain=."+domain; document.cookie=c_name+ "=" +escape(value)+expires + 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.

参考

1、JS设置Cookie过期时间 - 小角色 - 博客园

http://www.cnblogs.com/chenou/articles/1128040.htm

2、Expires和max-age的区别 - Robin99 - 博客园

http://www.cnblogs.com/yinhaiming/articles/1490811.html

3、js中cookie的使用详细分析_javascript技巧_脚本之家

http://www.jb51.net/article/14566.htm

js里cookie操作的更多相关文章

  1. JS封装cookie操作函数实例(设置、读取、删除)

    本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  2. Jquery和js实现cookie操作手机浮层广告;附加:js获取、添加、删除cookie

    1.jquery cookie包实现手机上的浮层广告 <span style="font-size:18px;">$(document).ready(function( ...

  3. nw.js的cookie操作

    在实战中,我遇到nw.js cookie一个奇怪的现象. 当我写入cookie(非httponly)后,关闭nw.js.然后再打开nw.js发现cookie没有写入成功.经过摸索,发现 nw.js的c ...

  4. js中cookie操作

    js中操作Cookie的几种常用方法 * cookie中存在域的概念,使用path和domain区分: * 在同一域中的set和del可以操作同一名称的cookie,但不在同一域中的情况下,则set无 ...

  5. 关于JS 的cookie 操作 与 json 的数据结构 问题

    今天写了一个购物车,由于购物车内容是保存在 cookie中 所以不想浪费服务器资源做cookie的操作 故在前端封装了一些对象来处理购物车,由于cookie的数据结构的设计是一个json格式 使用 账 ...

  6. js之cookie操作

    1.使用document.cookie保存信息 document.cookie = "Test=cooo";alert(document.cookie); //hours为空字符串 ...

  7. js里cookie,localStorage的简单用法

    cookie的使用场景---->注册功能(注册成功后,将账号和密码存入cookie里,在登录时显示到输入框里) 注册的js(将数据存入cookie):        escape和unescap ...

  8. js封装Cookie操作 js 获取cookie js 设置cookie js 删除cookie

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code var CookieUtil = { // 设置cookie set : functi ...

  9. js封装Cookie操作

    var CookieUtil = { // 设置cookie set : function (name, value, expires, domain, path, secure) { var coo ...

随机推荐

  1. Linux命令之awk数组使用范例

    目录 取ifconfig bond0的IP地址    1 命令如下:    2 统计apache日志单IP访问请求数排名    2 第一种方法    2 第二种方法    2 统计域名访问量    3 ...

  2. 个人网页的留言板实现与sae的数据库账户配置

    个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...

  3. HDU 2068 RPG的错排

    要求答对一半或以上就算过关,请问有多少组答案能使他顺利过关. 逆向思维,求答错一半或以下的组数 1,错排 错排公式的由来 pala提出的问题: 十本不同的书放在书架上.现重新摆放,使每本书都不在原来放 ...

  4. Python开源框架

    info:更多Django信息url:https://www.oschina.net/p/djangodetail: Django 是 Python 编程语言驱动的一个开源模型-视图-控制器(MVC) ...

  5. 关于HIVE的数据模型介绍

    (1)Hive数据库 类似传统数据库的DataBase,在第三方数据库里实际是一张表.简单示例命令行 hive > create database test_database; (2)内部表 H ...

  6. win server服务安装

    从一台机子的服务移到我的测试环境中: 1.copy 100pC上的服务目录(d:\...)到13PC中

  7. webuploader 断点续传

    webuploader 实现 断点续传webuploader是百度开发的上传文件前端控件.可支持html5和flash,因此对浏览器的兼容比较好.因为需要用到ie8,ie8不支持html5,所以必须支 ...

  8. FreeRTOS和Ucos在任务优先级的区别

    而ucos的任务优先级是任务优先级的数组越小,任务优先级越高.和STM32的中断优先级保持一样的分析,和freeRTOS相反.

  9. Spring 使用JSTL标签显示后台数据

    1. 先上项目结构图,其中config包下的代码文件参见前一篇博客   http://www.cnblogs.com/njust-ycc/p/6123505.html 引包: 2. 主要代码 (1)U ...

  10. yuecheng 笑话

    http://115.28.189.219:9898/stock/manager_articles/fundamentals 要闻 http://115.28.189.219:9898/stock/m ...