cookie

1,cookie的基本操作

 <script>
      // 1，取cookie 一堆字符串  "name=qs; age=18"中间是用分号加上空格来隔开的
        console.log(document.cookie);

        //2，设置cookie document.cookie='age=18'  必须设置为字符串

        document.cookie = 'age=18';

        document.cookie = 'age=18;max-age=2000';//Max-age 设置一个 Cookie 将要过期的秒数

        //用 expires 的方式设置 foo=bar 在5分钟后过期
        var d = new Date();
        d.setTime(d.getTime() + 5 * 60 * 1000); // in milliseconds
        document.cookie = 'foo=bar;expires=' + d.toGMTString() + ';';

        //用 max-age 来做同样的事情
        document.cookie = 'foo=bar;path=/;max-age=' + 5 * 60 + ';';
        // IE 浏览器(ie6、ie7 和 ie8) 不支持 max-age，所有的浏览器都支持 expires

        document.cookie = 'name=qs;';//不设置存储时间的话，它就是一个session临时会话，关了窗口就没了，它的活动周期就在窗口范围内

        // 3.cookie的改就直接重新赋值就会被覆盖，cookie的删除直接小于当前时间就会自动删除
        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]);//回调函数来处理找到的这条cookie
                        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];
        //封装一个对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]);//回调函数来处理找到的这条cookie
                        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 () {
                // bind也可以改变this指向，但是不会立即执行
                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>