1.概念:网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
2.为什么要有cookie:我们用变量存储数据在关闭页面时会销毁。如果我们需要一段时间内保存数据,但又不至于使用后端数据库去存储的东西就可以用cookie来存储。例如,当用户访问了某个网站时,我们就可以通过cookie来向访问者电脑上储存数据。
3.注意:
A.不同的浏览器存放的cookie位置不同,不能通用。
B.cookie的存储是以域名的形式区分的。
C.cookie的数据可以设置名字。
D.一个域名下存放的cookie的个数是有限制的。
E.每个cookie存放的内容大小也有限制。
4.cookie的存储方式
document.cookie = 'username = liang ';//可读可写
注意:A.在IE和FF下可以使用,而chrome里禁止本地使用;
B.通过
document.cookie
获取当前网站的cookie时,得到的是字符串形式的值,包含当前网站下所有cookie,不同的值用分号+空格分开;
C.如果我们想长时间存放一个cookie,需要在设置它的时候同时设置一个过期事件
document.cookie = 'username=liang;expires='+时间
,这个时间必须是字符串,默认是临时存储,例如
oDate.setDate(oDate.getDate()+5)
D.上述方法在IE里可能会有问题,用oDate.toGMTString()转成日期字符串就好了。
E.内容最好编码存放,encodeURL();
例如,
alert(encodeURL('你好\n你好'));
得到的值再用alert(decodeURL('得到的值'))弹出
5.接下来封装设置cookie、获取cookie(只获取有用值而不是全部)、删除cookie的方法。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script>
document.cookie = 'usename=wei';
document.cookie = 'id=1';
document.cookie = 'sex=男';
setCookie('usename','wei',30);
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie=key+'='+value+';expires='+oDate.toGMTString();
}
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]);
}
}}
alert(getCookie('id'));
function removeCookie(key){
setCookie(key,'',-1);
}
removeCookie('usename');
</script>
</body>
</html>
练习4:做一个表单,包含一个输入框一个提交和一个删除按钮,点击提交的时候把username的内容保存在cookie里,每当打开该页面时判断一下如果getcookie(‘username’)存在就在自动把用户名输入进去,点击删除按钮时,把这个cookie和输入框的内容全部删除
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#btn1,#btn2{cursor:pointer;}
</style>
</head>
<body>
<input type="text" id="text1" placeholder="请输入内容" />
<button id="btn1">提交</button>
<button id="btn2">删除cookie</button>
<script>
var oText=document.getElementById("text1");
var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
oBtn1.οnclick=function(){
if(oText.value!=''){
setCookie('username',oText.value,30);
}
alert(getCookie('username'));
}
oBtn2.οnclick=function(){
removeCookie('username');
alert(getCookie('username'));
oText.value='';
}
window.οnlοad=function(){
if(getCookie('username')!=null&&getCookie('username')!=''){
alert("1"+getCookie('username'));
oText.value=getCookie('username');
}else{
oText.value='';
}
}
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie=key+'='+value+';expires='+oDate.toGMTString();
}
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 removeCookie(key){
setCookie(key,'',-1);
}
</script>
</body>
</html>