JavaScript中的cookie学习-优快云博客

本文介绍如何使用 JavaScript 操作 Cookie，包括设置、获取和删除 Cookie 的方法，并通过实例演示了记住用户名和结合拖拽功能的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原帖地址：http://www.cnblogs.com/fengyuqing/archive/2013/06/04/javascript_cookie.html

在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>