cookie
通信协议:
IP地址:互联网上所有设备的唯一地址
TCP:面向连接的协议(可靠,又称三次握手,应答式-》即一应一回,无法保证数据发送的顺序及准确率)
UDP:面向数据的协议(不可靠,发送后不知道对方是否收到)
HTTP:超文本传输协议,网页传输协议,用于浏览器和服务器(特点:无状态协议,记性差)
cookie:会话跟踪技术()本地存储,解决http记不住状态的问题
cookie的特点:
1.只能使用文本文件(如果浏览器可以随意在客户端机器生成文件,比如身份令牌,那将是个定时炸弹,安全问题会变得非常严重)
2.只能存字符
3.文件有大小限制4K
4.数量限制,小于50条(一般浏览器限制大概在50条左右)
5.不能跨域(子能拿父,父不能拿子只能由写入cookie的 同一域名 的网页进行读取。简单来说,谁写的cookie,谁才有权利读取)
6.时间限制(每个cookie有时效,最短的有效期是:会话级别(关闭浏览器,cookie销毁)
为什么cookie要到本地服务器里面?因为cookie附属于HTTP,HTTP要用ajax请求,ajax要在本地服务器下,所以cookie也要
设置cookie:document.cookie = "user=admin"
注:每次只能设置一次cookie,且里面的字段必须是字符
里面的值格式是"名字=值"
中间用" ; "隔开
配置日期:expires
父级 AAAAA->cookie->cookie.html
console.log(typeof document.cookie); //string
console.log(document.cookie == ""); //false
document.cookie = "name=admin"
//设置日期为三天后过期
var d = new Date();
d.setDate(d.getDate()+3);
document.cookie = "age=18;expires=" + d
document.cookie = "sex = boy;path=/AAAAA"
console.log(document.cookie)
子级 AAAAA->cookie->cookieBrother->cookietest.html
//子能拿父,父不能拿子,除非改变所在路径,改变路径后还是要根据父子关系来判断
document.cookie = "relative=zi";
console.log(document.cookie); //可以拿到父级跟自己的cookie
document.cookie = "like=ball;path=/AAAAA/cookie"
console.log(document.cookie); //cookie可以被父级拿到
cookie封装
setCookie("name","admim",{
expires:3
})
setCookie("age","18",{
expires:5,
path:"/AAAAA"
})
//注:删除时要注意路径,一般是它们的默认路径
removeCookie("age",{
path:"/AAAAA"
})
console.log(getCookie("name"))
console.log(getCookie("age"))
//设置cookie
function setCookie(key,val,options){
options = options || {};
//初始化日期和路径的字符串
var expires = path = "";
//如果传来path值,那么就有路径字符串
if(options.path){
path = ";path=" + options.path;
}
//如传了expires值,那么就有日期字符串
if(options.expires){
var d = new Date();
d.setDate(d.getDate()+options.expires);
expires = ";expires=" + d
}
document.cookie = `${key}=${val}${path}${expires}`;
}
//删除cookie
function removeCookie(key,options){
options = options || {};
//表示删除
options.expires = -1;
//根据名称删除,与值无关
setCookie(key,"10",options)
}
//获取cookie
function getCookie(key){
//获取所以,并第一次分割,分割成每对cookie是一个数据
var arr = document.cookie.split("; ");
//拿到每一对
for(var i=0;i<arr.length;i++){
//再次分割成名称和值两个数据
if(arr[i].split("=")[0] == key){
return arr[i].split("=")[1];
}
}
//如果循环结束后还没有返回对应的值,表示没找到,返回空字符
return ""
}
记住7天密码
<body>
<input type="text" id="user"><br/>
<input type="text" id="pass"><br/>
<input type="checkbox" id="jz"><label for="jz">记住7天</label>
<input type="button" id="btn" value="登录">
</body>
<script src="../cookie.js"></script>
<script>
var ouser = document.getElementById("user");
var opass = document.getElementById("pass");
var obtn = document.getElementById("btn");
var ojz = document.getElementById("jz");
obtn.onclick = function(){
if(ojz.checked){
var obj = {
u:ouser.value,
p:opass.value
}
setCookie("msg",JSON.stringify(obj),{
expires:7
})
}
}
// var o = JSON.parse(getCookie("msg"));
// console.log(o)
// ouser.value = o.u;
// opass.value = o.p;
// console.log(ouser.value)
</script>