javascript中级--cookie
一基本函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//设置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('; ');
var i = 0;
//arr->['username=abc','password=123',...]
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);
}
// document.cookie = "user==blue;expires=";
// document.cookie = "password==123";
setCookie('username', 'abc', 30);
setCookie('password', '123', 300);
removeCookie('password');
alert(getCookie('password'));
</script>
</head>
<body>
</body>
</html>
二、cookie结合拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
//设置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('; ');
var i = 0;
//arr->['username=abc','password=123',...]
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);
}
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;
// alert(disX);
document.onmousemove = function(ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var y = oEvent.clientY - disY;
if (l < 0) {
l = 0;
} else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if (y < 0) {
y = 0;
} else if (y > document.documentElement.clientHeight - oDiv.offsetHeight) {
y = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = y + '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>
三、记录用户名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//设置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('; ');
var i = 0;
//arr->['username=abc','password=123',...]
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);
}
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="#">
用户名：<input type="text" name="user"> 密码：
<input type="password" name="pass">
<input type="submit" value="登录">
<a href="javascript:;">清除记录</a>
</form>
</body>
</html>
