1,cookie的基本操作
<script>
console.log(document.cookie);
document.cookie = 'age=18';
document.cookie = 'age=18;max-age=2000';
var d = new Date();
d.setTime(d.getTime() + 5 * 60 * 1000);
document.cookie = 'foo=bar;expires=' + d.toGMTString() + ';';
document.cookie = 'foo=bar;path=/;max-age=' + 5 * 60 + ';';
document.cookie = 'name=qs;';
document.cookie = 'age=18;max-age=-1;';
</script>
2. 管理cookie的函数
var manageCookie = {
setCookie: function (name, value, time) {
document.cookie = name + '=' + value + ';max-age=' + time + ';';
console.log(document.cookie);
console.log(111);
return this;
},
removeCookie: function (name) {
return this.setCookie(name, '', -1);
},
getCookie: function (name, callback) {
var allCookieArr = document.cookie.split('; ');
console.log(allCookieArr);
var len = allCookieArr.length;
for (var i = 0; i < len; i++) {
var itemCookieArr = allCookieArr[i].split('=');
console.log(itemCookieArr);
if (itemCookieArr[0] == name) {
callback(itemCookieArr[1]);
return this;
}
}
callback(undefined);
return this;
}
}
3,实现一个方块在浏览器拖动到任意位置后,关闭浏览器,下次打开浏览器,它还在刚才的位置。
<style>
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background-color: red;
}
</style>
<div></div>
<script>
var oDemo = document.getElementsByTagName('div')[0];
var manageCookie = {
setCookie: function (name, value, time) {
document.cookie = name + '=' + value + ';max-age=' + time + ';';
console.log(document.cookie);
console.log(111);
return this;
},
removeCookie: function (name) {
return this.setCookie(name, '', -1);
},
getCookie: function (name, callback) {
var allCookieArr = document.cookie.split('; ');
console.log(allCookieArr);
var len = allCookieArr.length;
for (var i = 0; i < len; i++) {
var itemCookieArr = allCookieArr[i].split('=');
console.log(itemCookieArr);
if (itemCookieArr[0] == name) {
callback(itemCookieArr[1]);
return this;
}
}
callback(undefined);
return this;
}
}
var drag = {
init: function (dom) {
this.dom = dom;
var _this = this;
this.bindEvent();
manageCookie.getCookie('newLeft', function (data) {
_this.dom.style.left = data + 'px';
}).getCookie('newTop', function (data) {
_this.dom.style.top = data + 'px';
})
},
bindEvent: function () {
this.dom.onmousedown = this.mouseDown.bind(this);
},
mouseDown: function (e) {
console.log(this);
document.onmousemove = this.mouseMove.bind(this);
document.onmouseup = this.mouseUp.bind(this);
this.disY = e.clientY - this.dom.offsetTop;
this.disX = e.clientX - this.dom.offsetLeft;
},
mouseMove: function (e) {
this.newLeft = e.clientX - this.disX;
this.newTop = e.clientY - this.disY;
this.dom.style.left = this.newLeft + "px";
this.dom.style.top = this.newTop + "px";
},
mouseUp: function () {
document.onmousemove = null;
document.onmouseup = null;
manageCookie.setCookie('newLeft', this.newLeft, 10000)
.setCookie('newTop', this.newTop, 10000);
}
}
drag.init(oDemo);
</script>