js cookie创建读取删除函数封装
一、总结
都是为了方便操作，这样弄了很方便
1、创建cookie的函数封装的作用：方便设置过期时间expire，方便设置键和值
2、查询cookie的数据封装的作用：document.cookie 获取的cookie是这样的：name1=aaa; name2=bbb; name3=ccc; 所以需要用split函数分割，先用:分割，然后用=等号分割
3、删除cookie的函数封装的作用：设置过期时间是位过去时间
二、js cookie创建读取删除函数封装
封装cookie创建/读取/删除的函数
- 创建cookie数据的函数封装
- 读取cookie数据的函数封装
split() 方法用于把一个字符串分割成字符串数组。
- 删除cookie的函数封装
三、代码
4-4 创建
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>课堂演示</title>
</head>
<body>
<script>
/*
//普通方法创建cookie，如果多条的话比较繁琐
document.cookie='name=jiyanpeng';
document.cookie='qq=365966179';
document.cookie='email=365966179@qq.com';
//封装创建cookie的函数1
function setCookie(key,value,expires){
var ddate=new Date();
ddate.setDate(ddate.getDate()+expires)
document.cookie=key+'='+value+';expires='+ddate;
alert(document.cookie)
}
setCookie('name1','jiyanpeng1',10);
setCookie('name3','jiyanpeng3')
*/
//封装创建cookie的函数2
function setCookie(key,value,expires){
document.cookie=key+'='+value+';expires='+ddate(expires);
} function ddate(expires){
var ddate=new Date()
ddate.setDate(ddate.getDate()+expires)
return ddate
}
setCookie('name4','jiyanpeng4',30);
//alert(ddate(7))
</script>
</body>
</html>
4-5 查询
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>课堂演示</title>
</head>
<body>
<script>
/*
//封装创建cookie的函数2
function setCookie(key,value,expires){
document.cookie=encodeURIComponent(key)+'='+encodeURIComponent(value)+';expires='+ddate(expires); //1、encodeURIComponent对中文进行编码
} function ddate(expires){
var ddate=new Date()
ddate.setDate(ddate.getDate()+expires)
return ddate
} setCookie('name','吉延鹏')
setCookie('qq','365966179')
setCookie('email','365966179@qq.com') //alert(document.cookie) //split() 方法用于把一个字符串分割成字符串数组。
var str='name1=aaa;name2=bbb;name3=ccc;';
var arrStr=str.split(';')
//alert(arrStr);
//alert(arrStr[0]); //name1=aaa
var arr=arrStr[0].split('=')
//alert(arr[0]+'\n'+arr[1]) */ //读取cookie
function getCookie(name){
var arrStr=document.cookie.split(';');
//alert(arrStr)
for(var i=0;i<arrStr.length;i++){
var arr=arrStr[i].split('=')
//alert(arr[0]+'\n'+arr[1])
if(arr[0]==name){return arr[1] }
}
return ''
} alert(getCookie('email')) </script>
</body>
</html>
4-6 删除
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>课堂演示</title>
</head>
<body>
<script>
//封装创建cookie的函数2
function setCookie(key,value,expires){
document.cookie=encodeURIComponent(key)+'='+encodeURIComponent(value)+';expires='+ddate(expires);
} function ddate(expires){
var ddate=new Date()
ddate.setDate(ddate.getDate()+expires)
return ddate
} setCookie('name','吉延鹏')
setCookie('qq','365966179')
setCookie('email','365966179@qq.com')
//读取cookie
function getCookie(name){
var arrStr=document.cookie.split('; ');
//alert(arrStr)
for(var i=0;i<arrStr.length;i++){
var arr=arrStr[i].split('=')
//alert(arr[0]+'\n'+arr[1])
if(arr[0]==name){return decodeURIComponent(arr[1]) } //2、decodeURIComponent解码
}
return ''
} function setCookie(key,value,expires){
var ddate=new Date();
ddate.setDate(ddate.getDate()+expires)
document.cookie=key+'='+value+';expires='+ddate;
}
function removeCookie(name){
setCookie(name,'随意值',-1)
}
alert(document.cookie)
removeCookie('name')
alert(document.cookie)
removeCookie('qq')
alert(document.cookie)
// alert(getCookie('name'))
// alert(getCookie('email'))
// alert(getCookie('qq')) </script>
</body>
</html>