// 设置保质期为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";
封装增删改查
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);
}
image.png
image.png
第二次访问的时候,服务器怎么认识你?
如何跟踪记录用户?
-
承载用户信息的http首部? 3个首部
请求头中的 form 字段 : email
因为有可能会受到垃圾邮件, 已经不用了.
useragent: 用来记录浏览器,不过基本没有用,大家都一样.
referrer : 只能用来标记从哪里来, 但无法标记用户.
image.png
2.根据客户端ip地址
如何获取ip地址,
在tcp链接的另一头可以轻松获取ip
缺陷:
描述的是机器,而不是用户.
不稳定, 会动态分配ip地址
浏览器防火墙,提供伪造ip
3.用户登录
优点: 针对性强.
缺点: 每次都要登录或注册
4.胖url
image.png
缺点:
服务器压力增大
生命周期只存在窗口打开时,关闭就没了.
5.cookie 本地文件
优点: 稳定,无需登录, 生命周期长, 不麻烦
image.png
从头到尾都是自动的,服务器操作就可以了.
image.png
image.png
image.png
cookie时间过期自动删除
image.png
www.baidu.com 能拿到 baidu.com 的cookie
baidu.com 不能拿 www.baidu.com 的cookie
www.baidu.com 是 baidu.com 的子域
image.png
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 : 可以设置时间段, 设置时以秒为单位.
// 设置保质期为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";
封装增删改查
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);
}
拖拽案例
practice