每天一个JavaScript实例-cookie的使用方法_cookie 一天实例-优快云博客

本文链接：https://blog.youkuaiyun.com/waiting7436/article/details/41348541

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-cookie的使用方法</title>
<style>
	div{margin:5px;}
</style>

<script>
window.onload = function(){
	if(navigator.cookieEnabled){
		document.getElementById("set").onclick = setCookie;
		document.getElementById("get").onclick  = getCookie;
		document.getElementById("erase").onclick  = eraseCookie;
	}

}
function setCookie(){
	var cookie = document.getElementById("cookie").value;
	var value  =document.getElementById("value").value;

	var futureDate = new Date();
	futureDate.setDate(futureDate.getDate()+10);
	

	var tmp =cookie + "=" + encodeURI(value) + ";expires=" + futureDate.toGMTString() + ";path=/";
	document.cookie =tmp;
}
function getCookie(){
	var key = document.getElementById("cookie").value;
	//console.log(key);
	var cookie = document.cookie;
	var first =cookie.indexOf(key+"="); 
	console.log(cookie);
	if(first>=0){
		var str = cookie.substring(first,cookie.length);
		var last = str.indexOf(";");
		console.log(first+"-------"+last);
		if(last < 0 ) last = str.length;

		str = str.substring(0,last).split("=");
		alert(decodeURI(str[1]));
	}else{alert("none found");}
}
function eraseCookie(){
	var key = document.getElementById("cookie").value;
	var cookieDate = new Date();
	cookieDate.setDate(cookieDate.getDate() - 20);
	document.cookie = key + "=;expires =" + cookieDate.toGMTString() + "; path=/";
}
</script>

</head>

<body>

<form>
	<label for = "cookie">enter cookie:</label><input type = "text" id ="cookie" /><br />
	<label for = "value">Cookie value:</label><input type = "text" id ="value" /><br />

</form>
<div>
	<button id ="set">Set cookie</button>
	<button id ="get">Get cookie</button>
	<button id ="erase">erase cookie</button>
</div>
</body>
</html>