浏览器刷新后input输入框依旧保留原值不被清空

文章目录

1. 1. 纯js实现
   1. 1.1. 设置Cookie
   2. 1.2. 获取Cookie
   3. 1.3. checkCookie
2. 2. 另一种方式是借助jQuery实现
3. 3. 创建Cookie
4. 4. 获取cookie值
5. 5. 删除Cookie
6. 6. 总结

html页面中的input框如果在浏览器刷新前有值，怎么在刷新后依然保留这个值不被清空呢？下面用setCookie的方案来解决这个问题.

首选判断input框中有值时,setcookie, 每次刷新浏览器时，读取Cookie值,如果存在Cookie值，则用此值初始化input值。

纯js实现

设置Cookie

/*
* @cname  cookie name 
* @cvalue cookie value 
* @ exdays cookie expires(天)
*/
function setCookie(cname,cvalue,exdays)
{
	if(!(document.cookie || navigator.cookieEnabled))
	{
		console.log('浏览器 cookie 未打开!');
	} 

	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	document.cookie = cname+"="+cvalue+"; "+expires;
}

获取Cookie

function getCookie(cname)
{
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++) 
	  {
	  var c = ca[i].trim();
	  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
	  }
	return "";
}

根据cname 获取相应的cookie值， cookie不存在就返回空字符串.

checkCookie

可以将判断Cookie是否存在的下一步处理逻辑封装到checkCookie方法中

function checkCookie()
{
	var user=getCookie("username");
	if (user!="")
	  {
		console.log('user', user);	
	  }
	else 
	  {
	  if (user!="" && user!=null)
	    {
	    setCookie("username",user,3000);
	    }
	  }
}

另一种方式是借助jQuery实现

首选引入jquery相应的库

<script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>

创建Cookie

如创建一个名为“example”，值为“foo”的cookie：

$.cookie("example", "foo");  

要设置cookie的有效期，可以设置expires值，如设置cookie的过期时间为10天：

$.cookie("example", "foo",{expires:10});  

设置cookie一小时后过期：

var cookietime = new Date(); 
cookietime.setTime(date.getTime() + (60 * 60 * 1000));//coockie保存一小时 
$.cookie("example", "foo",{expires:cookietime});  

要设置cookie的保存路径，可以设置path值，如设置路径为根目录：

$.cookie("example", "foo",{path:"/"});  

如果要设置路径为/admin，则：

$.cookie("example", "foo",{path:"/admin"});  

获取cookie值

$.cookie("example");  

删除Cookie

使用jQuery删除cookie，只需要将cookie的值为null，注意如果设置值为空的字符串时，并不能删除cookie，只是将cookie值清空而已。

$.cookie("example",null);  

或者

$.cookie('the_cookie', '', { expires: -1 }); // 删除 cookie 

github源码demo

• js-setcookie.html
• jquery-setcookie.html

总结

cookie是基于域名来储存的, cookie具有不同域名下储存不可共享的特性。 这也是cookie支持设置path和domain的作用之一。
所以要测试cookie是否生效，需要放到测试服务器上或者本地localhost服务器上才会生效。单纯的本地一个html页面打开是无效的。