JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h1>使用cookie的demo</h1>
	<h2>cookie介绍</h2>
	<p>
		<label>用户名:</label>
		<input type="text" class="userName" id="userName"/>
	</p>
	<p>
		<label>密码:</label>
		<input type="password" id="password">
	</p>
	<p>
		<label>记住密码:</label>
		<input type="checkbox" id="remember"/>
	</p>
	<input value="删除" type="button" id="delCookie">  
	<input type="button" value="显示cookie" id="showpassword">

JavaScript

// 获取所有的cookies
		function getCookies() {
			var allCookies = document.cookie;
			return decodeURIComponent(allCookies);
		}
		// 获取指定的cookie
		function getOneCookie(name) {
			var allCookies = document.cookie.split(";");
			for(var i = 0, ilen = allCookies.length; i < ilen; i++) {
				var temp = allCookies[i].split("=");
				if($.trim(decodeURIComponent(temp[0])) == name) {
					return decodeURIComponent(temp[1]);
				}
			}
			return -1;
		}
		// 添加cookie 有效期是一年
		function addCookie(name,value,expires,path,domain,secure) {
			var curCookie = encodeURIComponent(name) +'=' + encodeURIComponent(value);
			if(expires instanceof Date) {
				curCookie +=';expires =' + expires.toGMTString();
			}else {
				var date = new Date();
				date.setTime(date.getTime()+365*24*3600*1000);
				curCookie +=';expires =' + date.toGMTString();
			}
			if(path) {
				curCookie +="; path=" + path;
			}
			if(domain) {
				curCookie +="; domain=" +domain;
			}
			if(secure) {
				curCookie +="; secure";
			}
			document.cookie = curCookie;
		}
		// 删除cookie 
		function removeCookie(name,path,domain,secure) {
			addCookie(name,"",new Date(0),path,domain,secure);
		}
		
		$("#userName").unbind('blur').bind('blur',function(){
			  var val = $(this).val();
			  if(val) {
				 var curCookie = getOneCookie(val);
				 if(curCookie != -1) {
					$("#password").val(curCookie);
				 }
			  }
		});
		// 记住密码
		$("#remember").unbind('click').bind('click',function(){
			if(document.getElementById("remember").checked) {
				if($("#userName").val() && $("#password").val()) {
					addCookie($.trim($("#userName").val()),$.trim($("#password").val()));  
					alert("Saved!");
				}
				  
			}
		});
		// 删除cookie
		$("#delCookie").unbind('click').bind('click',function() {
			if($("#userName").val()) {
				removeCookie($("#userName").val());
				alert(getCookies());
			}else {
				alert("用户名为空");
			}
		});

		//...