在javascript中cookie的使用范围还是挺广的,比如它可以用在记住用户名,记住一个拖拽的物体的位置,记住用户选择的网站样式等等。
我们今天就来好好学习一下js中的cookie,相信大家学习完后一定会觉得原来cookie是这么的简单和强大,那我们开始吧!
我们先来看下cookie是怎么组成的,看如下代码:
var oDate=new Date();
oDate.setDate(oDate.getDate()+30);
document.cookie="user=blue;expires="+oDate;
document.cookie="pass=123";
alert(document.cookie);
cookie是document对象下的一个子对象,它是由一些字符串组成的,包括你想要保存的字段,当然还有过期时间。过期时间是可有可无的,在你没有写过期时间的时候cookie会在关闭浏览器的时候就会清除。
上面这段代码设置了用户名和密码,同时设置了过期时间为一个月,设置过期时间的时候只要在expires后面加上日期对象就行。
当然上面这段代码过于简单,如果我们要大量使用cookie,或者要读取cookie,删除cookie,设置cookie等,为了让代码更具有封装性和重用性,我们将设置cookie,读取cookie,删除cookie分别封装为一个函数,代码如下:
//设置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) {
//'username=abc; password=123456; aaa=123; bbb=4r4er'
var arr=document.cookie.split('; ');
var i=0;
//arr->['username=abc', 'password=123456', ...]
for(i=0;i<arr.length;i++) {
//arr2->['username', 'abc']
var arr2=arr[i].split('=');
if(arr2[0]==name) {
return arr2[1];
}
}
return '';
}
//删除cookie
function removeCookie (name) {
setCookie(name, '1', -1);
}
函数准备好了,很简单,我们来看看具体的实际应用吧。
当然,如果你要查看效果,一般得把文件放在服务器上进行访问,但是有个例外,就是可以在火狐上直接打开查看。
一:记住用户名:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web表单记住用户名</title>
<script>
window.onload = function () {
var oForm = document.getElementById('form1');
var oUser = document.getElementsByName('user')[0];
var oBtnClear = document.getElementsByTagName('a')[0];
oForm.onsubmit = function () {
setCookie('user', oUser.value, 30);
};
oUser.value = getCookie('user');
oBtnClear.onclick = function () {
removeCookie('user');
oUser.value='';
};
};
</script>
</head>
<body>
<form id="form1" action="http://www.miaov.com/">
用户名:<input type="text" name="user" />
密码:<input type="password" name="pass" />
<input type="submit" value="登录" />
<a href="javascript:;">清除记录</a>
</form>
</body>
</html>
上面的代码你得引入写好的设置cookie,读取cookie以及删除cookie的函数。
二:cookie结合拖拽
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cookie结合拖拽</title>
<script>
window.onload=function () {
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0;
var x = getCookie('x');
var y = getCookie('y');
if (x) {
oDiv.style.left = x + 'px';
oDiv.style.top = y + 'px';
}
oDiv.onmousedown = function (ev) {
var oEvent = ev || event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function (ev) {
var oEvent = ev || event;
oDiv.style.left = oEvent.clientX-disX + 'px';
oDiv.style.top = oEvent.clientY-disY + 'px';
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
setCookie('x', oDiv.offsetLeft, 5);
setCookie('y', oDiv.offsetTop, 5);
};
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
上面的代码同样的要引入写好的cookie设置,读取和删除函数。
怎么样,是不是很简单呢,cookie的学习就到此为止。大家要是在学习的过程中要是遇到什么困惑可以跟我留言,我会及时的回复大家的。
![](https://i-blog.csdnimg.cn/blog_migrate/20c72653f16569369a3e03ab21da1f60.jpeg)