• 用js实现保存文本框信息


    看知乎等大型网站都实现自动保存文本框内容,我就用js简单地实现这个功能,用到了onblur事件跟onload事件,保存到本地cookie(为减轻服务器负担,一般人都不加用session来做吧?)

    <body onload="savecontent()">
    <script type="text/javascript">
    function savecontent()
    {
    	var kk="";
    	var content=document.getElementById("text").value;
    	if(content.length>1)
    	{
    	setCookie("ct",content,30);
    	//document.cookie="ct="+content;
    	if((kk=getCookie("ct")).length>0)
    	{
    		 //alert(kk);
    		document.getElementById("text").value=kk;
    		document.getElementById("tips").innerHTML="内容已自动保存!!!";
    	}
    	}
    	else if(content.length<1&&((kk=getCookie('ct')).length>0))
    	{
    		document.getElementById("text").value=kk;
    	}
    
    }
    function setCookie(c_name,value,expiredays)
    {
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }
    
    function getCookie(c_name){
        if (document.cookie.length>0){  //先查询cookie是否为空,为空就return ""
          c_start=document.cookie.indexOf(c_name + "=")  //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为 -1  
          if (c_start!=-1){ 
            c_start=c_start + c_name.length+1  //最后这个+1其实就是表示"="号啦,这样就获取到了cookie值的开始位置
            c_end=document.cookie.indexOf(";",c_start)  //其实我刚看见indexOf()第二个参数的时候猛然有点晕,后来想起来表示指定的开始索引的位置...这句是为了得到值的结束位置。因为需要考虑是否是最后一项,所以通过";"号是否存在来判断
            if (c_end==-1) c_end=document.cookie.length  
            return unescape(document.cookie.substring(c_start,c_end))  //通过substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基础,想了解的可以搜索下,在文章结尾处也会进行讲解cookie编码细节
          } 
        }
        return ""
      }  
    
    
    </script>
    <form id="form1" name="form1" method="post" action="">
      <p>
        <label for="text"></label>
        <textarea name="text" id="text" cols="45" rows="5" onblur="savecontent()"></textarea>
      </p>
      <p>
        <input type="submit" name="button" id="button" value="提交" />
      <span id="tips"></span></p>
    </form>
    </body>
    

      其中setcookie跟getcookie懒得写,直接用到w3cshool和博友这篇文章的:http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html

     注意:在不定义站点的情况下会在chrome下失效(已测试ie、chrome、火狐,ie与火狐通过)

  • 相关阅读:
    有关vue中组件间的传值问题
    有关vue中同一个组件配置不同的路由产生的系列
    有关vue中用element ui 中的from表单提交json格式总是有冒号的问题解决办法
    有关element ui 中的switch在表格多列显示中全部为关闭或开启
    有关element ui中的 switch在表格中使用多个时互相不收影响的问题
    【PostgreSQL-9.6.3】修改监听的IP和端口
    【Oracle】truncate分区表
    【Oracle】append
    【PostgreSQL-9.6.3】函数(3)--日期和时间函数
    【PostgreSQL-9.6.3】函数(2)--字符型函数
  • 原文地址:https://www.cnblogs.com/quickvos/p/3969251.html
Copyright © 2020-2023  润新知