我是靠谱客的博主 大气玉米,这篇文章主要介绍JS设置cookie、读取cookie、删除cookie,现在分享给大家,希望可以做个参考。

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。而cookie是运行在客户端的,所以可以用JS来设置cookie.

cookie的适用场景

假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值,那么如何来设置和读取cookie呢?

cookie的结构

首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie

假设在A页面中要保存变量username的值(“jack”)到cookie中,key值为name,则相应的JS代码为:

复制代码
1
document.cookie="name="+username;

JS读取cookie:

假设cookie中存储的内容为:name=jack;password=123
则在B页面中获取变量username的值的JS代码如下:

复制代码
1
var username=document.cookie.split(";")[0].split("=")[1];

给cookie中添加值,并设置过期时间

//JS操作cookies方法

复制代码
1
2
3
4
5
6
7
8
//写cookies function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); }

读取cookies

复制代码
1
2
3
4
5
6
7
8
function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");//不太懂? if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; }

对于以上正则表达式:
(1)^ 匹配输入字符串的开始位置,除非在方括号表达式中使用,此时它表示不接受该字符集合。要匹配 ^ 字符本身,请使用 ^。
所以:(^| )匹配字符串的开始位置或者空格;([^;]*)匹配除了分号以外的任意字符;(;|$)匹配分号或者字符串的结束位置
(2)match是字符串的方法,replace和match是字符串的常用方法,match返回一个数组,如下所示:

复制代码
1
2
3
4
5
["uuid_tt_dd=1640106255935622948_20170508;", "", "1640106255935622948_20170508", ";", index: 0, input: "uuid_tt_dd=1640106255935622948_20170508; __utma=17…_lpvt_6bcd52f51e9b3dce32bec4a3997715ac=1507175788"] 0:"uuid_tt_dd=1640106255935622948_20170508;" 1:"" 2:"1640106255935622948_20170508" 3:";"

其中数组的长度为4,第一项是整体匹配所得值,第二项到第四项一次为3个捕获组的匹配项;后面两项为index和input。
(3)正则表达式中可以使用 字符串 与 变量 拼接。

删除cookies

为了删除一个cookie,可以将其过期时间设定为一个过去的时间

复制代码
1
2
3
4
5
6
7
8
function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1);//关键代码1 var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();//关键代码2 }

自定义cookie的过期时间

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//使用示例 setCookie("name","hayden"); alert(getCookie("name")); //如果需要设定自定义过期时间 //那么把上面的setCookie 函数换成下面两个函数就ok; //程序代码 function setCookie(name,value,time) { var strsec = getsec(time); var exp = new Date(); exp.setTime(exp.getTime() + strsec*1); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getsec(str) { alert(str); var str1=str.substring(1,str.length)*1; var str2=str.substring(0,1); if (str2=="s") { return str1*1000; } else if (str2=="h") { return str1*60*60*1000; } else if (str2=="d") { return str1*24*60*60*1000; } } //这是有设定过期时间的使用示例: //s20是代表20秒 //h是指小时,如12小时则是:h12 //d是天数,30天则:d30 setCookie("name","hayden","s20");

escape方法

(1)escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
(2)返回值:已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
(3)说明:
该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。
(4)可以使用 unescape() 对 escape() 编码的字符串进行解码。

javascript获取cookie的过期时间

javascript和动态页无法获取cookie过期的时间,过期时间由浏览器管理,javascript和动态页只能设置过期时间,无法通过document.cookie(javascript)或者Cookie.Expires(asp.net)属性获取到。

一定要获取过期时间,需要通过另外一个cookie值来记录对应cookie的过期时间。如下:

代码如下:

复制代码
1
2
3
4
var d = new Date(); d.setHours(d.getHours() + 1); //1小时候过期 document.cookie = 'testvalue=123;expires=' + d.toGMTString(); //存储cookie值 document.cookie = 'testexp=' + escape(d.toLocaleString()) + ';expires=' + d.toGMTString(); //存储cookie过期时间,要获取testvalue这个cookie的过期时间,通过获取testexp这个cookie来实现

注意:以上,这样设置cookie,后者不会覆盖前者,均添加到cookie中。

参考:http://www.jb51.net/article/64330.html

最后

以上就是大气玉米最近收集整理的关于JS设置cookie、读取cookie、删除cookie的全部内容,更多相关JS设置cookie、读取cookie、删除cookie内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(73)

评论列表共有 0 条评论

立即
投稿
返回
顶部