-
Cookie 是什么:Cookie 是存储在用户浏览器中的小型文本文件,用于跟踪和存储有关用户的信息。
-
创建 Cookie:通过使用 JavaScript 的
document.cookie
属性,可以创建和设置 Cookie。Cookie 由名称、值和可选的属性组成,例如过期时间、域名、路径等。 -
读取 Cookie:使用
document.cookie
属性可以读取当前域名下的所有 Cookie。读取的值是一个包含所有 Cookie 的字符串,需要进行解析和处理才能获取特定的 Cookie 值。 -
Cookie 属性:
- 过期时间(Expires):指定 Cookie 的有效期限。过期时间可以是一个具体的日期时间或一个相对时间(例如,几天后过期)。
- 域(Domain):指定 Cookie 可以被发送到哪个域名。默认情况下,Cookie 只会发送到设置它的域名。
- 路径(Path):指定 Cookie 可以被发送到哪个路径。默认情况下,Cookie 只会发送到设置它的路径及其子路径。
- 安全标志(Secure):指示浏览器仅通过 HTTPS 连接发送 Cookie。
-
设置 Cookie:可以使用
document.cookie
属性设置 Cookie。Cookie 字符串的格式为 "name=value; expires=expiration_date; path=path_value; domain=domain_value; secure"。可以使用适当的值填充这些属性,以创建所需的 Cookie。 -
获取和修改 Cookie:使用
document.cookie
属性获取当前域名下的所有 Cookie。可以解析和处理该字符串来获取特定的 Cookie 值。要修改 Cookie 值,只需重新设置相同名称的 Cookie 即可。 -
删除 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"))