什么是cookie:
cookie是一些数据(存储用户数据)
cookie存在哪里:存储于你电脑上的文本文件中
cookie的作用:记录浏览器中用户的信息
cookie技术又叫会话跟踪技术
前后端都可以使用
cookie的主要内容
名称(cookie的唯一标识) name
内容(cookie存放的内容) content
域名(cookie所能使用的域名,即文件存放的文件夹)
路径(cookie存放的子目录) / path
创建时间(cookie创建的时间,即文件创建的时间)
到期时间(cookie到期的时间,即文件删除的时间) expires
cookie的特点
1.文件有大小限制:4KB
2.数量限制:一般浏览器,限制大概在50条左右
3.读取有域名限制:不可跨域读取,只能由来自写入cookie的同一域名的网页可进行读取。简单的讲就是,谁写的cookie,谁才有权利读取。
4.时效限制:每个cookie都有时效,最短的有效期是会话级别。就是当浏览器关闭,cookie会立即销毁。如果没有指定cookie的时效,那么默认的时效就是会话级别
cookie的缺点
1.cookie可能被禁用
2.cookie与浏览器相关联,不能跨浏览器访问
3.cookie可能被删除
4.cookie安全性不高
cookie注意点
1.cookie的名或者值中不能包含分号(;)、逗号(,)、等号(=)以及空格
2.cookie名唯一值,同名会被覆盖
3.中文需要编码(encodeURIComponent)和解码(decodeURIComponent)
4.cookie用来存放不太重要的信息
例:
document.cookie = 'username_zhangsan=zhangsan;path=/;expires=' + new Date('');
cookie的增,删,改
//cookie的新增:
document.cookie = 'name=content;path=/;expires=' + new Date();
//cookie的修改(cookie名称唯一,使其覆盖):
document.cookie = 'name=我是被修的;path=/;expires=' + new Date('2019/10/25');
//cookie的删除(设置过期时间)
document.cookie = 'name=过期;path=/;expires=' + new Date('2008/1/1');
cookie的解析
var cookie = document.cookie;
cookie = cookie.split('; ');
cookie = cookie.map(value => {
var temp = value.split('=');
return {
name: temp[0],
content: temp[1]
}
})
var res = cookie.filter(value => {
return value.name === 'username_lisi'
})[0];
console.log(res.content);
对cookie进行封装
//创建cookie
function setCookie(name,content,iDay){
var date=new Date();
var day=date.getDate();
var hours=date.getHours();
date.setDate(day + iDay); //设置几天后过期
date.setHours(hours-8); //消除东八区自动加8小时的影响
document.cookie=`${name}=${encodeURIComponent(content)};path=/;expires=${date}`;
}
setCookie("text","我是第一个cookie",7)
setCookie("text1","我是第二个cookie",7)
setCookie("text2","我是第三个cookie",7)
//删除cookie
function removeCookie(name){
setCookie(name,"",-1)
}
//removeCookie("text") //此时删不掉,因为在删的同时一直在创建,一般都是在某个事件中创建cookie,在某个事件中删除cookie
//获取cookie列表,结果为数组,数组的内容为对象
function getCookieList(){
var list=[];
var cookie=document.cookie;
if(!cookie){
return list;
}
list=cookie.split("; ")
list=list.map(value=>{
var temp=decodeURIComponent(value).split("=");
return{
name:temp[0],
content:temp[1],
}
})
return list;
}
console.log(getCookieList());
//获取name对应的cookie内容
function getCookie(name){
var list=getCookieList();
var res=list.filter(value=>{
return value.name===name;
})[0] //其返回值为一个数组,第0个下标则为其结果
if(res){
return decodeURIComponent(res.content);
}else{
return ''
}
}
console.log(getCookie('text'));
//encodeURIComponent对中文进行编码
//decodeURIComponent对所编的码进行解码
小案例:
点击计数加1,且刷新不对其产生影响
下面只给出body和script部分的代码
<body>
0
</body>
<script>
var cookie = document.cookie;
if (cookie) {
cookie = cookie.split('; ');
cookie = cookie.map(value => {
var temp = value.split('=');
return {
name: temp[0],
content: temp[1]
}
});
var res = cookie.filter(item => item.name === 'data_count')[0];
if (res) {
// var content = res.content
var { content } = res;
if (content) {
document.body.innerText = content;
}
}
}
document.onclick = function () {
var count = document.body.innerText * 1;
count++;
document.body.innerText = count;
document.cookie = `data_count=${count};path=/;expires=${new Date()}`;
}
</script>