javascript+cookie实现的文本输入记录

  功能要求:有一个文本框,旁边有个button,点击按钮后将文本框输入的内容保存到cookie。在文本框得到焦点后,在下方显示这个文本框输入过的最近的五个词语。 

 

  示例源代码如下

<style>
#dvPop{display:none;position:absolute;left:0px;top:20px;border:solid 1px #000000;background:#ffffff;width:200px;}
</style>
<div style="position:relative">
<input type="text" id="text" autocomplete="off" onfocus="showAuto()"/><input type="button" value="查询" onclick="save()"/>
<div id="dvPop"></div>
</div>
<script>
function setCookie(name,value){//保存cookie
  var d=new Date();
  d.setFullYear(d.getFullYear()+1);
  document.cookie=name+"="+encodeURIComponent(value)+";path=/;expires="+d.toGMTString();}
//获取cookie
function getCookie(name){//读取cookie
  var m=new RegExp(name+'=([^;]+)','i').exec(document.cookie);
  if(m)return decodeURIComponent(m[1]);
  return "";
}
var max=5;//定义要保存的最大记录数
function setText(dv){
   document.getElementById('text').value=dv.innerHTML;
   dv.parentNode.style.display='none'
}
function showAuto(){
  var history=getCookie('auto'),arr=[],s='',pop=document.getElementById('dvPop');
  if(history!=''){
     arr=history.split('|');
	 for(var i=0,j=arr.length;i<j;i++)s+='<div onclick="setText(this)">'+arr[i]+'</div>';
	 pop.innerHTML=s;
	 pop.style.display='block';
  }
}
function saveToCookie(v){
  var history=getCookie('auto'),arr=[],count=1,i=0,s=v;//s为要保存到cookie的字符串,每项用|分隔开,最新输入的一项保存到第一个位置
  if(history!='')arr=history.split('|');
  
  for(var j=arr.length;i<j&&i<max;i++)
    if(arr[i]!=v){
	  s+='|'+arr[i];
	  count++;
	  if(count>=max)break;
	}
  
  setCookie('auto',s);
}
function save(){
  document.getElementById('dvPop').style.display='none'
  var t=document.getElementById('text')
  if(t.value!='')saveToCookie(t.value);
  t.value='';
}
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:javascript+cookie实现的文本输入记录

评论(0)Web开发网
阅读(205)喜欢(0)JavaScript/Ajax开发技巧