Cookie 使用和封装

1. Cookie 是什么：Cookie 是存储在用户浏览器中的小型文本文件，用于跟踪和存储有关用户的信息。

2. 创建 Cookie：通过使用 JavaScript 的 document.cookie 属性，可以创建和设置 Cookie。Cookie 由名称、值和可选的属性组成，例如过期时间、域名、路径等。

3. 读取 Cookie：使用 document.cookie 属性可以读取当前域名下的所有 Cookie。读取的值是一个包含所有 Cookie 的字符串，需要进行解析和处理才能获取特定的 Cookie 值。

4. Cookie 属性：

   • 过期时间（Expires）：指定 Cookie 的有效期限。过期时间可以是一个具体的日期时间或一个相对时间（例如，几天后过期）。
   • 域（Domain）：指定 Cookie 可以被发送到哪个域名。默认情况下，Cookie 只会发送到设置它的域名。
   • 路径（Path）：指定 Cookie 可以被发送到哪个路径。默认情况下，Cookie 只会发送到设置它的路径及其子路径。
   • 安全标志（Secure）：指示浏览器仅通过 HTTPS 连接发送 Cookie。

5. 设置 Cookie：可以使用 document.cookie 属性设置 Cookie。Cookie 字符串的格式为 "name=value; expires=expiration_date; path=path_value; domain=domain_value; secure"。可以使用适当的值填充这些属性，以创建所需的 Cookie。

6. 获取和修改 Cookie：使用 document.cookie 属性获取当前域名下的所有 Cookie。可以解析和处理该字符串来获取特定的 Cookie 值。要修改 Cookie 值，只需重新设置相同名称的 Cookie 即可。

7. 删除 Cookie：要删除 Cookie，可以将其过期时间设置为一个过去的时间。这样，浏览器会自动将其从存储中删除。

封装一下

            var manageCookie = {
                //设置cookie
                set: function (name, value, date) {
                    document.cookie = name + '=' + value + '; max-age=' + date;	//这里要求用户传入的第三个参数为过期的秒数
                },
                //移除cookie
                remove: function (name) {
                    this.set(name, '', 0);	//只需要把时间设置成0就可以了
                },
                //获取cookie
                get: function (name) {
                    var cookies = document.cookie.split('; ');	
                    for (var i = 0; i < cookies.length; i++) {
                        var item = cookies[i].split('=');
                        if (item[0] == name) {
                            return item[1];
                        }
                    }
                }
            }

demo 案例 拖拽小球

  let drag = {
            init(elDom){
                this.dom = elDom
                this.bindEvent()
                let left = manageCookie.get("left")
                let top = manageCookie.get("top")
                // mangeCookie.each()
                this.dom.style.transform = `translate(${left?left:100}px,${top?top:100}px)`
            },
            bindEvent(){
                console.log("bindEvent");
                this.dom.onmousedown = this.mouseDown.bind(this)
            },
            mouseDown(e) {
                console.log("mouseDown run");
                window.onmousemove = this.mouseMove.bind(this)
                this.dom.onmouseup = this.mouseUp.bind(this)
                console.log(this.dom.offsetX);
                this.mouseX = e.clientX
                this.mouseY = e.clientY
            },
            mouseMove(e){
                this.left = e.clientX - this.dom.offsetLeft - this.dom.clientWidth/2
                this.top = e.clientY - this.dom.offsetTop - this.dom.clientHeight/2
                this.dom.style.transform = `translate(${this.left}px,${this.top}px)`
            },
            mouseUp(){
                console.log("mouseup run");
                window.onmousemove = null
                // this.dom.onmousedown = null
                manageCookie.set("left",this.left,99999)
                manageCookie.set("top",this.top,99999)
            }
        }

        drag.init(document.querySelector(".dot"))