通过js当中的cookie实现可以记住内…

在上边的两个文本框当中输入我们的值,当我们点击刷新页面的时候,下边的两个框会自动填充上我们的内容,因为我们cookie设置的保存的时间是默认值,因此关闭浏览器之后就没了。
目前在ie和火狐下正常显示,谷歌浏览器暂时无法获取。
通过js当中的cookie实现可以记住内容的表单


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>可以记住内容的表单(js cookie)</title>
    <script>

        //将我们的数据加载到页面当中
        function loadData(){

            if(read_cookie("text3")){

                $("text3").value=read_cookie("text3");
            }
            if(read_cookie("text4")){
                $("text4").value=read_cookie("text4");
            }

        }

        //下边的是我们读我们的cookie
        function read_cookie(key){
            var str,ary;
            str=document.cookie;
            //该函数的作用是将我们分号前后的空格去掉 g表示的是在输入字符串中查找所有可能的匹配,返回的结果可以是多个如果不加/g只会匹配一个
            ary=str.replace(/ *; */g,";").split(";");
            key=escape(key)+"=";
            for(var i=0;i<ary.length;i++){
                if(ary[i].indexOf(key)==0){
                     //返回我们的键值
                     return ((ary[i].split("=")[1]));
                }
            }

        }

        function saveData(){
            //将键值写入
            write_cookie("text3",$("text1").value);
            write_cookie("text4",$("text2").value);
        }

        //写入我们的cookie
        function write_cookie(key,value,cookieDomain,cookiePath,expireTime,targetWindow){
            //我们的cookie信息
            var strAppendix="";
            strAppendix+=cookieDomain?";domain="+cookieDomain:"";
            strAppendix+=cookiePath?";path="+cookiePath:"";
            strAppendix+=expireTime?";expires="+expireTime:"";
            targetWindow=targetWindow?targetWindow:top;
            targetWindow.document.cookie=escape(key)+"="+escape(value)+strAppendix;
        }

        function $(str){
            return (document.getElementByIdx_x_x(str));
        }


    </script>
</head>

<body onunload="saveData()" onload="loadData()">

      <h3>通过js cookie实现可以记住内容的表单</h3>
      <table style="font-family: '楷体';">

          <tr>
              <td>普通文本框</td>
              <td><input type="text" id="text1"></td>
          </tr>

          <tr>
              <td>普通文本框</td>
              <td><input type="text" id="text2"></td>
          </tr>

          <tr>
              <td>可以记住内容的文本框1</td>
              <td><input type="text" id="text3"></td>
          </tr>


          <tr>
              <td>可以记住内容的文本框2</td>
              <td><input type="text" id="text4"></td>
          </tr>

          <tr>
              <td><button type="submit">提交</button></td>
              <td><button onclick="alert(document.cookie)">查看cookie</button></td>
          </tr>

      </table>


</body>
</html>

通过js当中的cookie实现可以记住内容的表单

你可能感兴趣的:(通过js当中的cookie实现可以记住内…)