cookie 也叫HTTPCookie,是客户端与服务器端进行会使用的一个能够在浏览器本地化存储的技术
作用:在浏览器储存少量数据(一般是字符串)如用户登陆名字和密码,下次再访问网站时无需再输密码
Cookie,由键值对形式的文本组成:name = value;
完整格式:
*的为必选
*name = value; *[expires=date];[path=路径];[domain=域名];[secure]
*name = value;
|
*[expires=date];
|
[path=路径];
|
[domain=域名];
|
[secure]
|
必选 为你要保存的键值对
| 表示cookie失效时,默认是浏览器关闭时失效 |
限制在该域名下访问
|
访问路径,默认在当前文件所在目录
|
安全设置,如果设置了则必须使用https协议才可以获取cookie
|
1-设置/获取cookie
使用document对象来获取和设置cookie
document.cookie ="name=张三"/"password=1234"
2-获取cookie 获取保存的数据
console.log(document.cookie)
3-URL编码设置cookie和URL解码(主要是针对中文)
document.cookie = "name"+encodeURLComponent("张三")
//加密,编码:encodeURLComponent()
//"张三" --%E5%BC%AO%E4%B8%89
URL解码
decodeURLComponent();
4-过期时间/失效时间:默认是浏览器关闭时间
expires =Date //设置7天后失效
document.cookie = "name=李四;expires="+d;
var d = new Date(); //当前时间
d.setDate(d.getDate()+7) //7天后的日期
可主动删除cookie(立马让cookie失效)可以给它一个过去的时间或者现在的时间
var d = new Date();
document.cookie = "name=abc;expires="+d;
console.log(document.cookie) //空
5-path=路径
设置默认是当前文件所在的位置
如果设置path=/ ,表示磁盘根目录,则其他路径也可获取到该cookie值
注:在设置path时,也要设置失效时间expires
6-domain = 域名 //www.baidu.com -- baidu.com
7-secure:限制只有https协议的网址才可访问
封装cookie
function setCookie(name,value,expires){
var cookieText = encodeURLComponent(name)+"="+encodeURLComponent(value);
if(expires && expires instanceof Date){
cookieText += ";expires="+expires;
}
document.cookie = cookieText;
return docodeURLCompontent(document.cookie)
}
expires instanceof Date
判断这个变量是否为日期类型
2-获取cookie
function getCookie(name){
var cookieText = decodeURLComponent(document.cookie) //获取所有的cookie信息
var arr = cookieText.split("; "); //拆分 ["name7=a","name8=b"]根据分号,空格进行拆分
//遍历,找到name匹配的键值对,返回对应的value值
for(var i=0; i<arr.length; i++){
var str = arr[i];
var arr2 = str.split("=");
if(arr2[0]==name){
return arr[1]
}
}
//如果找不到对应的name,则返回空的字符串
return "";
}
var cookieText = getCookie("name1");
3-删除cookie
function removeCookie(name){
var d = new Date();
document.cookie = name+"= ;expires="+d;
return docodeURLCompontent(document.cookie);
}
var cookieText = removeCookie("name2")