Coookie的设置、获取、清除操作

#麻辣小龙虾#

已于 2023-04-18 10:13:44 修改

阅读量1.1k

点赞数

分类专栏： web前端 javascript 文章标签： javascript 前端 html

于 2017-05-13 11:58:50 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/71793685

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

javascript

90 篇文章 1 订阅

订阅专栏

<html>
<head>
<style>

span:nth-of-type(3){background:red;}
div{
	padding:20px;
	margin:20px;
}
</style>
<title>Coookie的设置、获取、清除操作</title>

</head>

<body>
<div id="div1">
<div>姓名：<input type="text" class="name"></div>
<div>年龄：<input type="text" class="age"></div>
<div>身高：<input type="text" class="hight"></div>
<div>留言：<textarea class="fb_back"></textarea>
</div>
<div>姓名：<span class="spanname"></span></div>
<div>年龄：<span class="spanage"></span></div>
<div>身高：<span class="spanhight"></span></div>
<div>留言：<span class="spanfb_back"></span></textarea>
</div>
<button class="setcookie">提交kookie</button>
<button class="getcookie">获取kookie</button>
<button class="clearcookie">清除kookie</button>
</body>
</html>
<script type="text/javascript">
	var setBtn = document.getElementsByClassName("setcookie")[0];
	var getBtn = document.getElementsByClassName("getcookie")[0];
	var clearBtn = document.getElementsByClassName("clearcookie")[0];
	setBtn.onclick = function(){
		var name = document.getElementsByClassName("name")[0].value;
		var age = document.getElementsByClassName("age")[0].value;
		var hight = document.getElementsByClassName("hight")[0].value;
		var fb_back = document.getElementsByClassName("fb_back")[0].value;
		setCookie("name", name, 5);
		setCookie("age", age, 5);
		setCookie("hight", hight, 5);
		setCookie("fb_back", fb_back, 5);
		/*
		document.cookie  = 'name='+name;
		document.cookie  = 'age='+age;
		document.cookie  = 'hight='+hight;
		document.cookie  = 'fb_back='+fb_back;
		*/
		console.log(document.cookie);
	}
	getBtn.onclick = function(){
		var name = getCookie("name");
		var age = getCookie("age");
		var hight = getCookie("hight");
		var fb_back = getCookie("fb_back");
		var spanname = document.getElementsByClassName("spanname")[0];
		var spanage = document.getElementsByClassName("spanage")[0];
		var spanhight = document.getElementsByClassName("spanhight")[0];
		var spanfb_back = document.getElementsByClassName("spanfb_back")[0];
		spanname.innerHTML = name;
		spanage.innerHTML = age;
		spanhight.innerHTML = hight;
		spanfb_back.innerHTML = fb_back;
	}
	
	clearBtn.onclick = clearCookie;
	
	
	//设置kookie
	function setCookie(name, value, iDay){   
    /* iDay 表示过期时间   
    cookie中 = 号表示添加，不是赋值 */   
    var oDate=new Date();   
    oDate.setDate(oDate.getDate()+iDay);       
    document.cookie=name+'='+value+';expires='+oDate;
	}
	
	
	//获取kookie
	function getCookie(name){
		/* 获取浏览器所有cookie将其拆分成数组 */   
		var arr=document.cookie.split('; ');  
		
		for(var i=0;i<arr.length;i++)    {
			/* 将cookie名称和值拆分进行判断 */       
			var arr2=arr[i].split('=');               
			if(arr2[0]==name){           
				return arr2[1];       
			}   
		}       
		return '';
	}
	
	//清空所有cookie;
	function clearCookie(){
		var cookie = document.cookie;
		var cookieArray = cookie.split("; ");	//将所有键值对分开
		var cookieKey = [];		//保存cookie中键值名的数组
		for(var i = 0;i<cookieArray.length;i++){
			var keyValue = cookieArray[i].split("=");
			cookieKey[cookieKey.length] = keyValue[0];	//将对应的cookie的键存入数组中
		}
		for(var i = 0;i<cookieKey.length;i++){
			setCookie(cookieKey[i],1,-1);	//只要将cookie的保存日期设置为-1就可以清除kookie
		}
		console.log("已经成功清除所有cookie信息！");
	}
	
</script>