Cookie 使用和封装

44 阅读2分钟
  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 案例 拖拽小球

image.png

  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"))