1. Cookie 概念
- cookie 是由服務(wù)器端生成打却，發(fā)送給
User-Agent倡鲸。瀏覽器會將cookie以key/value的形式保存到某個目錄下的文本文件中搔啊。下次請求同一網(wǎng)站時就發(fā)送該cookie給服務(wù)器简逮。 - 每個瀏覽器都有一個cookie文件
- cookie大小有限制趁啸，大約都在4k左右舶斧。
2. 基本用法
在Console中使用document.cookie可以獲取當(dāng)前的所有cookie
效果
同時也可以添加cookie欣鳖，也是通過這個
document.cookie，例子如下：
<body>
<script>
var oDate = new Date();
oDate.setDate(oDate.getDate() + 3);
// console.log(oDate);
document.cookie = 'age=18; max-age=1000';
document.cookie = 'name=sun; expires=' + oDate;
document.cookie = 'test=session';
</script>
</body>
代碼效果
注意茴厉，設(shè)置了過期時間的cookie會到過了時間才被注銷泽台，而
Session這條cookie在瀏覽器關(guān)閉后，就會不見了的矾缓。
3. 封裝函數(shù)增刪改查cookie
其中 removeCookie 的操作就是調(diào)用 setCookie函數(shù)怀酷，將其過期時間設(shè)成 -1 即可。
由于document.cookie 返回的結(jié)果是一個字符串嗜闻，所以查找某個cookie的value蜕依，即函數(shù)getCookie 需要有拆分字符串成數(shù)組這樣的操作。
<body>
<script>
document.cookie = 'age=18; max-age=1000';
document.cookie = 'test=session';
var manageCookie = {
setCookie: function(name, value, time) {
document.cookie = name + '=' + value + ';max-age=' + time;
return this;
},
removeCookie: function (name) {
return this.setCookie(name, '', -1);
},
getCookie: function(name, cb) {
var allCookieArr = document.cookie.split('; ');
console.log(allCookieArr);
for (var i = 0; i < allCookieArr.length; i++) {
var itemCookieArr = allCookieArr[i].split('=');
console.log(itemCookieArr);
if (itemCookieArr[0] === name) {
cb(itemCookieArr[1]);
return this;
}
}
cb(undefined);
return this;
}
}
manageCookie
.setCookie('color', 'pink', 3000)
.setCookie('id', '7', 5000)
.removeCookie('age')
.getCookie('id', function (data) {
console.log(data);
})
</script>
</body>
代碼結(jié)果
代碼結(jié)果
4. Demo
做一個小方塊拖拽琉雳，cookie存儲小方塊位置样眠，頁面關(guān)閉后再次打開時，小方塊能處于上次關(guān)閉時候的位置咐吼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cookie Demo</title>
<style>
#square {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="square"></div>
<script>
var oSquare = document.getElementById('square');
var manageCookie = {
setCookie: function(name, value, time) {
document.cookie = name + '=' + value + ';max-age=' + time;
return this;
},
removeCookie: function (name) {
return this.setCookie(name, '', -1);
},
getCookie: function(name, cb) {
var allCookieArr = document.cookie.split('; ');
// console.log(allCookieArr);
for (var i = 0; i < allCookieArr.length; i++) {
var itemCookieArr = allCookieArr[i].split('=');
// console.log(itemCookieArr);
if (itemCookieArr[0] === name) {
cb(itemCookieArr[1]);
return this;
}
}
cb(undefined);
return this;
}
}
// 拖拽功能
var drag = {
init: function(dom) {
this.dom = dom;
var _this = this;
this.bindEvent();
manageCookie.getCookie('newLeft', function (data) {
if (data) {
_this.dom.style.left = data + 'px';
}
}).getCookie('newTop', function (data) {
if (data) {
_this.dom.style.top = data + 'px';
}
})
},
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.disX = e.clientX - this.dom.offsetLeft;
this.disY = e.clientY - this.dom.offsetTop;
},
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(oSquare);
</script>
</body>
</html>
代碼效果
