概念
cookie叫做会话跟踪技术,在一次会话从开始到结束的整个过程中,全程跟踪记录客户端的状态。
简介
cookie:
-
1.可以设置过期时间
-
2.最大可以存储4KB,每一个域名下最多可以存储50条数据(不同的浏览器,有偏差)
【只能是字符串】
语法
格式:
name=value;expires=date;path=path;domain=somewhere.com;secure,
name 健
value 值 都是自定义
encodeURIComponent
将中文编译成对应的字符
decodeURIComponent
将对应的字符编译成中文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//设置cookie
document.cookie = 'username=' + encodeURIComponent('钢铁侠');
//获取cookie
alert(decodeURIComponent(document.cookie));
/*
expires: 过期时间
必须填写,日期对象
【】系统会自动清除过期的cookie
*/
/*
path 限制访问路径
如果不去设置,默认是加载当前.html文件的路径
【】我们设置的cookie的路径,和加载当前文件的路径,必须一直,如果不一致,cookie访问失败
*/
/*
domain 限制访问域名
如果不去设置,默认是加载当前.html文件的域名
【】如果加载当前文件域名和设置的域名不一样,设置cookie失败
*/
/*
secure
如果不设置,设置cookie,可以通过http协议加载文件设置,
也可以通过https协议加载文件设置
设置这个字段以后,只能设置https协议加载cookie
*/
</script>
</body>
</html>
打开浏览器的控制台,就能发现有一条cookie了
cookie的封装
首先封装设置cookie的方法
//先封装一个得到几天后日期的函数,从而方便设置cookie几天后过期
function afterDate(n) {
var d = new Date();
var day = d.getDate();
d.setDate(n + day);
return d;
}
//设置cookie函数
function setCookie(name, value, {
expires,
path,
domain,
secure
}) {
var cookieStr = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires) {
cookieStr += ';expires' + afterDate(expires);
}
if (path) {
cookieStr += ';path=' + path;
}
if (domain) {
cookieStr += ';domain' + domain;
}
if (secure) {
cookieStr += ';secure';
}
document.cookie = cookieStr;
}
这个setCookie()封装好后测试一下
setCookie("超级英雄","钢铁侠",{
expires: 3
});
setCookie("西游记","孙悟空",{
expires: 3
});
setCookie("三国","刘备",{
expires: 3
});
//document.cookie包含所有的cookie
alert(decodeURIComponent(document.cookie));
//超级英雄=钢铁侠; 西游记=孙悟空; 三国=刘备
如何得到其中一条cookie,getCookie()的封装
function getCookie(name) {
//超级英雄=钢铁侠; 西游记=孙悟空; 三国=刘备
var cookieStr = decodeURIComponent(document.cookie);
//找到指定字符串开始的位置
var start = cookieStr.indexOf(name + '=');
if(start == -1) {
return null;
}else{
var end = cookieStr.indexOf(";",start);
if(end == -1) {
end = cookieStr.length;
}
var str = cookieStr.substring(start,end);
//对获取的字符串进行分割
var arr = str.split("=");
return arr[1];
}
}
测试一下结果
alert(getCookie("超级英雄"));
然后封装removeCookie()
function removeCookie(name) {
//只需要将cookie的时间设置为已经过期的时间就可以了
document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}
最后将这三个函数可以再封装成一个函数
function $cookie(name) {
switch(arguments.length){
case 1:
return getCookie(name);
break;
case 2:
if(arguments[1] == null) {
removeCookie(name);
}else{
setCookie(name,arguments[1],{});
}
break;
default:
setCookie(name,arguments[1],arguments[2]);
break;
}
}
这样就可以根据输入的内容来判断要进行什么操作
附上cookie.js
function afterDate(n) {
var d = new Date();
var day = d.getDate();
d.setDate(n + day);
return d;
}
function setCookie(name, value, {
expires,
path,
domain,
secure
}) {
var cookieStr = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires) {
cookieStr += ';expires' + afterDate(expires);
}
if (path) {
cookieStr += ';path=' + path;
}
if (domain) {
cookieStr += ';domain' + domain;
}
if (secure) {
cookieStr += ';secure';
}
document.cookie = cookieStr;
}
function getCookie(name) {
var cookieStr = decodeURIComponent(document.cookie);
var start = cookieStr.indexOf(name + '=');
if(start == -1) {
return null;
}else{
var end = cookieStr.indexOf(";",start);
if(end == -1) {
end = cookieStr.length;
}
var str = cookieStr.substring(start,end);
var arr = str.split("=");
return arr[1];
}
}
function removeCookie(name) {
document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}
function $cookie(name) {
switch(arguments.length){
case 1:
return getCookie(name);
break;
case 2:
if(arguments[1] == null) {
removeCookie(name);
}else{
setCookie(name,arguments[1],{});
}
break;
default:
setCookie(name,arguments[1],arguments[2]);
break;
}
}