JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。
而Cookie是运行在客户端的,所以可以用JS来设置Cookie.
假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,对于JS中
的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存
的效果。解决这个问题的最好的方案是采用cookie来保存变量的值。
简单的说,cookie是以键值对的形式保存的,即key=value的格式,各个cookie之间一般是以";"分隔的。
cookie可以实现严格的跨页面全局变量的要求.
cookie是存于用户硬盘的一个文件。这个文件对应于一个域名,便使这个cookie可用.因此,cookie可以跨越一个域名下的多个网页,
但不能跨越多个域名使用。
在cookie设置中,用escape()函数进行编码,可避免乱码和特殊字符问题;当使用escape()编码后,在取出值以后需要使用unescape()
JS操作cookie方法!
删除指定名称的cookie
下面是一个用JS写的登录功能 login.html
运行的页面如下:
运行的效果如下:
而Cookie是运行在客户端的,所以可以用JS来设置Cookie.
假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,对于JS中
的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存
的效果。解决这个问题的最好的方案是采用cookie来保存变量的值。
简单的说,cookie是以键值对的形式保存的,即key=value的格式,各个cookie之间一般是以";"分隔的。
cookie可以实现严格的跨页面全局变量的要求.
cookie是存于用户硬盘的一个文件。这个文件对应于一个域名,便使这个cookie可用.因此,cookie可以跨越一个域名下的多个网页,
但不能跨越多个域名使用。
在cookie设置中,用escape()函数进行编码,可避免乱码和特殊字符问题;当使用escape()编码后,在取出值以后需要使用unescape()
进行解码才能得到原来cookie的值
JS设置cookie
假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则相应的JS代码为:
document.cookie=“name”+username;
设置cookie时可以直接给document.cookie赋值,而且后面的值不会覆盖前面额值,它具有一种累加机制。
cookie的值可以由document.cookie直接获得,但这样获取的是所有的cookie的值;要通过一指定的cookie名称来获得所对应的值
,则需要做一些处理
JS读取cookie
假设cookie中存储的内容为:name=jack;password=123
则在B页面中获取变量username的JS代码如下:
var username=document.cookie.split(";")[0].split("=")[1];
JS操作cookie方法!
写cookie
function setCookie(name,value)
{
var Days =30;
var exp=new Date();
//设置cookie过期时间
exp.setTime(exp.getTime()+Days*24*60*60*1000);
document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();
}
读cookie
function GetCookie(cookieName)
{
/* Cookie字符串*/
var theCookie=""+document.cookie;
/* 找到cookieName的位置*/
var ind=theCookie.indexOf(cookieName);
/*如果未找到cookie,返回空字符串*/
if(ind==-1 ||cookieName==“")return "";
/*确定分号的位置*/
var ind1=theCookie.indexOf(';',ind);
if(ind1==-1)
{
ind1=theCookie.length;
}
/*读取cookie的值*/
return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}
删除指定名称的cookie
function deleteCookie(username)
{
var exp=new Date();
exp.setTime(exp.getTime()-1);
var cval=getCookie(username);
/*删除一个cookie,就是将其过期时间设定为一个过去的时间*/
if(cval!=null)
{
document.cookie=name+"="+cval+";expires="+exp.toGMTString();
}
}
下面是一个用JS写的登录功能 login.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
/**
*
*/
function SetCookie(cookieName,cookieValue,nDays)
{
//当前日期
var today=new Date();
//cookie过期时间
var expire=new Date();
/* 如果未设置nDays参数或者nDays为0,取默认值 1 */
if(nDays==null||nDays==0){
nDays=1;
}
//计算cookie的过期时间
expire.setTime(today.getTime()+nDays*24*60*60);
//设置Cookie值
document.cookie=cookieName+"="+escape(cookieValue)+";expires="+expire.toLocaleDateString();
}
function logine(){
//用户名
var username= $("user").value;
var password= $("pass").value;
var save=$("save").checked;
if(username=="admin" && password=="admin"){
if(save){
SetCookie("username", username, 7);
}
else{
SetCookie("username", username, 1);
}
document.location = "page2.html";
}
else{
alert("用户名或密码错误");
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="main">
<div>
<span>用户名:</span><input type="text" id="user" />
</div>
<div>
<span>密码:</span><input type="password" id="pass" />
</div>
<div>
<input type="checkbox" id="save" />七天内无需登陆
</div>
<div>
<input type="button" οnclick="logine()" value="登录" />
</div>
</div>
</body>
</html>
运行的页面如下:
page.html内部页面,必须在登陆后才能使用,该页面需要对用户当前PC的cookie进行判断,如果发现用户已通过机器登陆过,该页面显示
欢迎信息,否则显示请登陆
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function GetCookie(cookieName){
var theCookie=""+document.cookie;
//找到cookieName的位置
var ind=theCookie.indexOf(cookieName);
/*
* 如果未找到cookieName,返回空字符串
*/
if(ind==-1||cookieName==""){
return "";
}
//确定分号的位置
var ind1=theCookie.indexOf(';',ind);
if(ind1==-1)
{
ind1=theCookie.length;
}
//读取cookie的值
return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}
function init() {
// 从Cookie中读取用户名信息
var username = GetCookie("username");
// 如果用户已经登录过
if (username && username.length > 0) {
//显示欢迎信息
$("msg").innerHTML = "<h2> 欢迎光临:" + username + "!</h2>";
} else {
$("msg").innerHTML = "<a href='login.html'>请返回,登录!</a>";
}
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body οnlοad="init()">
<div id="msg"></div>
</body>
</html>
运行的效果如下: