1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 设置保质期为3天
var oDate = new Date();
console.log(oDate);
oDate.setDate(oDate.getDate() + 3);
console.log(oDate);
//两次赋值 不会互相覆盖.
document.cookie = "name=mike;max-age=1000";// 时间段,以秒为单位
document.cookie = "age=19;expires=" + oDate;
//设置时 不能拼接在一起, 默认会把第一个分号;后面的当成属性描述
document.cookie = "name=mike;age=19"// 后面是不行的
// 相同名字则会覆盖.
document.cookie = "age=20;"
// 不同 域名, 或者不同路径 则 相同名字不会互相覆盖.
// 设置路径 // 只能设置向上该文件存在的路径.
document.cookie = "school:duyi;path=/"
// 删除 // 只要设置时间小于当前时间 自动删除
document.cookie = "age=20;max-age=-1";
封装增删改查
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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) {
var str = document.cookie;
// 先根据 ; 分割成数组, 注意 这里 ; 后面有一个空格.
var arr = str.split("; ");
// 每个元素按照 "=" 分割成数组
for(var i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("=");
if (arr[i][0] == name) {
return arr[i][1];
break;
}
}
},
getCookie2 : function (name, callback) {
var str = document.cookie;
// 先根据 ; 分割成数组, 注意 这里 ; 后面有一个空格.
var arr = str.split("; ");
// 每个元素按照 "=" 分割成数组
for(var i = 0; i < arr.length; i++) {
var item = arr[i].split("=");
if (item[0] == name) {
callback(item[1]);
return this;
}
}
callback(undefined);
return this;
}
}
manageCookie
.setCookie("color","red",1000)
.setCookie("teacher","wenbing",1000)
.removeCookie("teacher")
.removeCookie("color")
.getCookie2("name",fn);
console.log(manageCookie.getCookie("name"));
function fn (data) {
console.log(data);
}
第二次访问的时候,服务器怎么认识你? 如何跟踪记录用户?
- 承载用户信息的http首部? 3个首部
请求头中的 form 字段 : email
因为有可能会受到垃圾邮件, 已经不用了.
useragent: 用来记录浏览器,不过基本没有用,大家都一样.
referrer : 只能用来标记从哪里来, 但无法标记用户.
2.根据客户端ip地址
如何获取ip地址,
在tcp链接的另一头可以轻松获取ip
缺陷: 描述的是机器,而不是用户. 不稳定, 会动态分配ip地址 浏览器防火墙,提供伪造ip
3.用户登录 优点: 针对性强. 缺点: 每次都要登录或注册
4.胖url
缺点:
服务器压力增大
生命周期只存在窗口打开时,关闭就没了.
5.cookie 本地文件
优点: 稳定,无需登录, 生命周期长, 不麻烦
从头到尾都是自动的,服务器操作就可以了.
cookie时间过期自动删除
www.baidu.com 能拿到 baidu.com 的cookie
baidu.com 不能拿 www.baidu.com 的cookie
www.baidu.com 是 baidu.com 的子域
wenku.baidu.com 和 www.baidu.com 都能从 baidu.com 中获取cookie
wenku.baidu.com 和 www.baidu.com 不能互相获取cookie
类似的,path 默认为document文件在服务器上的路径. 路径不同无法获取cookie
expires / max-age expires : 可以设置具体的时间点,时间戳 max-age : 可以设置时间段, 设置时以秒为单位.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 设置保质期为3天
var oDate = new Date();
console.log(oDate);
oDate.setDate(oDate.getDate() + 3);
console.log(oDate);
//两次赋值 不会互相覆盖.
document.cookie = "name=mike;max-age=1000";// 时间段,以秒为单位
document.cookie = "age=19;expires=" + oDate;
//设置时 不能拼接在一起, 默认会把第一个分号;后面的当成属性描述
document.cookie = "name=mike;age=19"// 后面是不行的
// 相同名字则会覆盖.
document.cookie = "age=20;"
// 不同 域名, 或者不同路径 则 相同名字不会互相覆盖.
// 设置路径 // 只能设置向上该文件存在的路径.
document.cookie = "school:duyi;path=/"
// 删除 // 只要设置时间小于当前时间 自动删除
document.cookie = "age=20;max-age=-1";
封装增删改查
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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) {
var str = document.cookie;
// 先根据 ; 分割成数组, 注意 这里 ; 后面有一个空格.
var arr = str.split("; ");
// 每个元素按照 "=" 分割成数组
for(var i = 0; i < arr.length; i++) {
arr[i] = arr[i].split("=");
if (arr[i][0] == name) {
return arr[i][1];
break;
}
}
},
getCookie2 : function (name, callback) {
var str = document.cookie;
// 先根据 ; 分割成数组, 注意 这里 ; 后面有一个空格.
var arr = str.split("; ");
// 每个元素按照 "=" 分割成数组
for(var i = 0; i < arr.length; i++) {
var item = arr[i].split("=");
if (item[0] == name) {
callback(item[1]);
return this;
}
}
callback(undefined);
return this;
}
}
manageCookie
.setCookie("color","red",1000)
.setCookie("teacher","wenbing",1000)
.removeCookie("teacher")
.removeCookie("color")
.getCookie2("name",fn);
console.log(manageCookie.getCookie("name"));
function fn (data) {
console.log(data);
}
拖拽案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
<style type="text/css">
body{
background-color: #333;
}
.item{
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="item"></div>
<script type="text/javascript">
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, callback) {
var str = document.cookie;
var arr = str.split("; ");
for(var i = 0; i < arr.length; i++) {
var item = arr[i].split("=");
if (item[0] == name) {
callback(item[1]);
return this;
}
}
callback(undefined);
return this;
}
}
var LBS = {
}
// 获取方块
var item = document.getElementsByClassName('item')[0];
//封装拖拽
function dragMove (div) {
var x,y,disX,disY;
var width = window.innerWidth;
var height = window.innerHeight;
var jsondata;// 放进cookie前的 中间量
// 边界相关量
var xmin = 0;
var xmax = width - parseInt(window.getComputedStyle(div,null).width);
var ymin = 0;
var ymax = height - parseInt(window.getComputedStyle(div,null).height);
console.log(xmin,ymin,xmax,ymax);
// 拿出cookie 里的值 // 初始化
manageCookie.getCookie("data",function (data) {
if(typeof data != "undefined") {
newData = JSON.parse(data);
div.style.left = newData.x + 'px';
div.style.top = newData.y + 'px';
}
});
div.onmousedown = function (e) {
x = parseInt(window.getComputedStyle(this,null).left);
y = parseInt(window.getComputedStyle(this,null).top);
disX = e.clientX - x;
disY = e.clientY - y;
document.onmousemove = function (e) {
x = e.clientX - disX;
y = e.clientY - disY;
// 设置边界
x < xmin && (x = xmin);
y < ymin && (y = ymin);
x > xmax && (x = xmax);
y > ymax && (y = ymax);
div.style.left = x + 'px';
div.style.top = y + 'px';
}
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
// 放在 这里比放在mousemove 更合理一些.
jsondata = {
"x" : x,
"y" : y
}
manageCookie.setCookie("data",JSON.stringify(jsondata),10000);
}
}
}
dragMove(item);
</script>
</body>
</html>
