拖拽方块记录Cookie

发表于 | 分类于 |

Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下cookie），浏览器会将Cookie以key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器（前提是浏览器设置为启用cookie）。Cookie就是一个小型文件（浏览器对cookie的内存大小是有限制的——-用来记录一些信息）。

Cookie实际上主要是web服务器开发人员设置的，前端开发人员较少使用cookie。但是我们得学会简单操作cookie （大概流程如下）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var manageCookie = {
	setCookie: function (name, value, time) { 
		document.cookie = name+'='+value+';max-age='+time;
		return this;//返回manageCookie用于实现链式函数调用
	 },
	 removeCookie: function(name){
		 return this.setCookie(name,'',-1) //直接把max-age设置为负数使之过期，浏览器会自动删除过期cookie
	 },
	 getCookie: function(name, callback){
		var allCookieArr = document.cookie.split(', ');//注意用逗号和一个空格来切分cookie值！
		for(var i = 0; i<allCookieArr.length; i++){
			var itemCookieArr = allCookieArr[i].split('=');
			if(itemCookieArr[0]==name){
				callback(itemCookieArr[1]);
				return this;//同样也是返回manageCookie实现链式调用
			}
		}
		callback(undefined);//如果循环结束都没有找到name对应的值，则调用undefined
		return this;//返回manageCookie实现链式调用
	 }
}

manageCookie
	.setCookie('color', 'red', 10000)
	.setCookie('dunteng', 'great', '10000000')
	.removeCookie('color')
	.getCookie('dunteng', function(data){
		console.log(data)
	})



结合上述核心功能实现一个小demo：鼠标拖拽方块改变其坐标，下次打开页面的时候通过cookie记忆呈现上次离开网页时的方块状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div id="demo"></div>
<script>
    var oDemo = document.getElementById('demo');
    
    var manageCookie = {
        setCookie: function (name, value, data) {
            // expires
            // var oDate = new Date();
            // oDate.setDate(oDate.getDate() + date);
            // document.cookie = key + '=' + val + ';expires=' + oDate;
            
            document.cookie = name + '=' + value + ';max-age=' + data; 
            return this;
        },
        removeCookie: function (name) {
            this.setCookie(name, '', -1); 
            return this;
        },
        getCookie: function (name, callback) {
            var allCookieArr = document.cookie.split('; ');
            var len = allCookieArr.length;
            for(var i = 0; i < len; i++) {
                var itemCookieArr = allCookieArr[i].split('=');
                if(itemCookieArr[0] == name) {
                    callback(itemCookieArr[1]);
                    return this; 
                } 
            }
            callback(null);
            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';
                return data;
            })
        },
        bindEvent: function () {
            this.dom.onmousedown = this.mouseDown.bind(this);
        },
        mouseDown: function (e) {
            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>

（完）