- cookie 用来存储数据数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来向访问者的电脑上存储数据
- 不同的浏览器存放的cookie位置不一样，所以也是不能通用的
- cookie的存储是以域名的形式进行划分的
- cookie的数据是可以设置名字的
- 一个域名下面存放的cookie的个数是有限制的。不同的浏览器存放的个数也不一样。
- 每一个cookie存放的内容大小也是有限制的，不同的浏览器存放的内容大小不一样。
我们通过document.cookie来获取当前网站下的cookie的时候,得到的是字符串形式的值，它包含了当前网站下所有的cookie,它会把所有的cookie通过一个分号+空格的形式串联起来。
如果我们想长时间存放一个cookie，需要设置这个cookie的时候,同时给他设置一个过期的时间(这个时间必须是字符串的格式)cookie默认是临时存储的，当浏览器关闭进程的时候，自动销毁.
cookie的操作
//document.cookie = '名字=值;expires='+字符串格式的时间
例如:
var oDate = new Date();
oDate.setDate(oDate.getDate()+10); //10天以后销毁
//oDate.toGMTString(); 将日期转换为字符串格式
//内容最好编码存放,encodeURI
//alert(encodeURI('你好'));
//alert(decodeURI('%E4%BD%A0%E5%A5%BD'));结果就是你好
document.cookie = 'username='+encodeURI('leo\n你好')+'leo;expires='+oDate.toGMTString();
document.cookie = 'age=32';
我把获取到cookie,设置cookie,删除cookie封装成了插件
function getCookie(key){
var arr1 = document.cookie.split(";");
for(var i =0;i<arr1.length;i++)
{
var arr2 = arr1[i].split("=");
if(arr2[0]==key)
{
return decodeURI(arr2[1]);
}
}
}
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie = key+"="+value+' ;expires='+oDate.toGMTString();
}
function deleteCookie(key){
setCookie(key," ",-1)
}
下面是cookie的运用
记录用户登录名:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookie获取</title>
</head>
<body>
<input type = "text" id="username">
<input type = "button" id="login" value="登录">
<input type="button" value="删除" id="del">
<script>
var oUesername = document.getElementById("username");
var oLogin = document.getElementById("login");
var oDel = document.getElementById("del");
//工具类开始
//获取到cookie
function getCookie(key){
var arr1 = document.cookie.split(";");
for(var i =0;i<arr1.length;i++)
{
var arr2 = arr1[i].split("=");
if(arr2[0]==key)
{
return decodeURI(arr2[1]);
}
}
}
//获取结束
//设置cookie
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie = key+"="+value+' ;expires='+oDate.toGMTString();
}
//设置结束
//删除cookie
function deleteCookie(key){
setCookie(key," ",-1)
}
//删除结束
//工具类结束
if(getCookie("username"))
{
oUesername.value = getCookie("username");
}
oLogin.onclick = function(){
window.alert("登陆成功");
setCookie("username","小明",10);
}
oDel.onclick = function(){
deleteCookie("username");
oUesername.value = "";
}
</script>
</body>
</html>
