cookies
程序员文章站
2024-03-20 13:34:22
...
参考文章： cookies w3c
Cookies 用于存储 web 页面的用户信息。
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookies 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。
/*
cookie: 会话跟踪技术 客户端
session: 会话跟踪技术 服务端
cookie作用:
将网页中的数据保存到浏览器中
cookie生命周期:
默认情况下生命周期是一次会话(浏览器被关闭)
如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
cookie注意点:
cookie默认不会保存任何的数据
cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
cookie有大小和个数的限制
个数限制: 20~50
大小限制: 4KB左右
cookie作用范围:
同一个浏览器的同一个路径下访问
如果在同一个浏览器中, 默认情况下下一级路径就可以访问
如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以;
document.cookie = "name=zs;path=/;";
例如:
保存到了www.it666.com/jQuery/Ajax/路径下,
我们想在 www.it666.com/jQuery/Ajax/13-weibo/,
和 www.it666.com/jQuery/ 路径下也能访问
例如:
我们在www.it666.com下面保存了一个cookie,
那么我们在edu.it666.com中是无法访问的
如果想在edu.it666.com中也能访问, 那么我们需要再添加一个domain属性才可以;
document.cookie = "name=zs;path=/;domain=it666.com;";
*/
创建多条cookie
<script>
window.onload = function() {
document.cookie ='name=jiaody';
document.cookie = 'age=23';
console.log(document.cookie);//name=jiaody; age=23 以字符串key=value;key=value的形式返回
}
</script>
自定义过期时间和路径
<script>
window.onload = function() {
var date = new Date();
date.setDate(date.getDate() + 1);
document.cookie ='name=jiaody;path=/;expires='+date.toGMTString()+';';
}
</script>
domain和window.location.pathname
document.domain 获取当前文件所在的服务器域名
window.location.pathname 获取当前文件的路径
封装添加、获取和删除cookie的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="ajax2.js"></script>
<script>
window.onload = function() {
//封装添加cookie的方法
addCookie('name','jiao','/',3);
function addCookie(key,value,path,day,domain) {
var index = window.location.pathname.lastIndexOf('/');
var currentPath = window.location.pathname.slice(0,index);
path = path || currentPath;
domain = domain || document.domain;
if(!day){
document.cookie = key+'='+value+';path='+path+';domain='+domain+';';
}else{
var date = new Date();
date.setDate(date.getDate()+day);
document.cookie = key+'='+value+';expires='+date.toGMTString()+';path='+path+';+domain='+domain+';';
}
}
//封装获取cookies的方法
function getCookie(key){
//console.log(document.cookie);//age=23; name=jiao; name=jiao
var arr = document.cookie.split(';');//将字符串数组以;分割成字符串数组
//console.log(arr);//(3) ["age=23", " name=jiao", " name=jiao"]
for(var i=0;i<arr.length;i++){
var tempArr = arr[i].split('=');
if(tempArr[0] === key){
return tempArr[1];
}
}
}
console.log(getCookie('age'));//23
//封装删除cookie的方法：将要删除的cookie的expires设置为过去的时间
//默认情况下只能删除默认路径下保存的cookie，如果想删除指定路径下保存的cookie,必须在删除时指定路径
function delCookie(key,path) {
addCookie(key,getCookie(key),path,-1);
}
delCookie('name','/');
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
上一篇： ACM寒假集训2019.1.23
下一篇： session实现购物车操作