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.
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
9天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
21 7
|
12天前
|
JSON 前端开发 JavaScript
在JavaScript中,异步编程是一种处理非阻塞操作(如网络请求、文件读写等)的重要技术
【6月更文挑战第12天】JavaScript中的异步编程通过Promise和async/await处理非阻塞操作。Promise管理异步操作的三种状态,防止回调地狱,支持链式调用和并行处理。async/await是ES8引入的语法糖,使异步代码更像同步代码,提高可读性。两者结合使用能更高效地处理复杂异步场景。
21 3
|
1月前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
19 3
|
1月前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
21 0
|
12天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
2天前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
7 2
|
11天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
12 2
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
JS中使用Cookie实现记住密码以及设置密码过期时间
JS中使用Cookie实现记住密码以及设置密码过期时间
4 0
|
28天前
|
存储 JavaScript 安全
JS 监听用户页面访问&页面关闭操作并进行数据上报
该文主要讨论了一个网页安全项目的需求和实现,涉及用户访问和离开页面时的数据报告。需求包括首次进入、刷新、新标签页打开、导航切换以及页面关闭时的数据发送。技术要点包括使用Cookie和SessionStorage存储信息,事件监听以及navigator.sendBeacon方法进行数据发送。实现策略包括轮询检测URL变化和在unload事件中触发页面关闭报告。文章还提到了相关流程图和代码示例,总结中强调了数据上报在用户行为分析中的重要性。
|
6天前
|
存储 JavaScript 前端开发
JavaScript如何使用Cookie存值
JavaScript如何使用Cookie存值