一、什么是cookie
cookie就是页面用来保存信息,比如自动登录、记住用户名等等。
二、cookie的特点
1、同一个网站中所有的页面共享一套cookie
2、cookie有数量、大小限制
3、cookie有过期时间
三、如何在js中使用cookie
document.cookie
document.cookie = 'username = abc';
document.cookie = 'password = 123';
document.cookie = 'email = abcdef@123.com';
通过上面的代码我们可以发现,document.cookie并不会像定义变量那样被覆盖,这个也是cookie的一个特点吧。
如果没有设置过期时间,那么关闭浏览器就会清空cookie。如何设置过期时间呢?答案是:expires。一般我们会结合Date()来使用。
var oDate = new Date();
oDate.setDate(oDate.getDate() + 30);
document.cookie = 'userid = abc;expires = ' + oDate;
我们可以通过火狐浏览器看到,userid的过期时间是当前时间的30天后。最后我们对获取cookie的方法进行封装。
function setCookie(name, value, iDay){
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name + '=' + value + ';expires = ' + oDate;
}
学会了如何设置cookie,那么该如何读取cookie呢?
首先我们看下cookie里的内容是什么类型。
document.cookie = 'username = abc';
document.cookie = 'password = 123';
document.cookie = 'email = abcdef@123.com';
alert(document.cookie); //'username=abc; password=123; email=abcdef@123.com'
得到的类型是字符串,当然这么长的一串并不是我们所想要的,我们要的是读取username,得到abc。
我们可以用string对象的split()方法,把字符串分割成数组,遍历数组匹配我们所要的信息。具体怎么实现的,看下面的代码:
function getCookie(name){
var arr = document.cookie.split('; ');
for(var i = 0; i < arr.length; i++){
var arr2 = arr[i].split('=');
if(arr2[0] == name){
return arr2[1];
}
}
return '';
}
这样我们就可以得到我们想要的cookie值了
alert(getCookie('username')); //abc
alert(getCookie('password')); //123
alert(getCookie('email')); //abcdef@123.com
除了设置,获取cookie,我们还可以删除cookie。我们在网上经常看到有清除用户名这样的功能,其实就是用到了清除cookie。
清除cookie其实很简单,只要使过期时间为昨天就可以了。通过前面封装的setCookie来设置。
function removeCookie(name){
setCookie(name,'1',-1);
}
最后我们将设置,获取,清除cookie封装成一个cookie.js
//设置cookie
function setCookie(name,value,iDay){
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name + '=' + value + ';expires = ' + oDate;
}
//读取cookie
function getCookie(name){
var arr = document.cookie.split('; ');
for(var i = 0; i < arr.length; i++){
var arr2 = arr[i].split('=');
if(arr2[0] == name){
return arr2[1];
}
}
return '';
}
//清除cookie
function removeCookie(name){
setCookie(name,'1',-1);
}
下面我们把cookie应用的实例吧。最常见的就是记住用户名,当用户登录过一次后,通过cookie记录下用户的账号和密码,这样下次打开页面的时候不用再次输入账号密码了。附上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>记住用户名</title>
</head>
<body>
<form action="http://www.baidu.com/" id="myform">
<label for="username">用户名:</label><input type="text" name="username" id="username" />
<label for="userpass">密码:</label><input type="password" name="userpass" id="userpass" />
<input type="submit" value="登录" />
<a href="javascript:;">清楚记录</a>
</form>
</body>
</html>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
window.onload = function(){
var oForm = document.getElementById('myform');
var oTxt1 = document.getElementById('username');
var oTxt2 = document.getElementById('userpass');
var oClear = document.getElementsByTagName('a')[0];
oTxt1.value = getCookie('username');
oTxt2.value = getCookie('userpass');
oForm.onsubmit = function(){
setCookie('username',oTxt1.value,30);
setCookie('userpass',oTxt2.value,30);
}
oClear.onclick = function(){
removeCookie('username');
removeCookie('userpass');
oTxt1.value = '';
oTxt2.value = '';
}
}
</script>
PS:博客搬家了,以后不再 优快云 更新了,见谅。最新博客地址:http://www.cnblogs.com/yjzhu/