父页面从子页面调取数据并展示1

父页面：（用localStorage传数据）





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
   <script src="./jquery-3.1.1.min.js"></script>
</head>
<body>
    <a href="./input.html"><button>添加</button></a>
   <br>
   <br>
   <br>
   <!--<button onclick="get()">获取信息</button>-->
   <ul id="d1"></ul>
</body>
   <script>

      function get(){
         var dataStr1 = getMsg();
         var dataStr = dataStr1.split('&');
         var num = dataStr.length;
         var htmlStr = "";
         for(var b=0;b<num;b++){
            var data = dataStr[b].split('=');
               htmlStr += "<li>"+data[0]+":"+data[1]+"</li>";
                 //只获取值
               // htmlStr += "<li>"+data[1]+"</li>";
         }
          $('#d1').append(htmlStr);
      }
      get();//调用该函数


      function getMsg(){
         var dataArr = new Array();
         var storage = window.localStorage;
         var num = storage.length;
         for(var i=0;i<num;i++){
            var key = storage.key(i);
            var keyTag = key.substring(0,3);        //key标记
            if(keyTag === 'zxc'){
               var keyValue = storage.getItem(key);        
       if(keyValue.length !== 0){             
     dataArr = keyValue;            
   }else{               
     storage.removeItem(key);    //清除空的信息               }         
                  }     
    }    
     return dataArr;   
   } 
  </script>
</html>






子页面




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
    <script src="./jquery-3.1.1.min.js"></script>
</head>
<body>
    <div>
        <ul>
            <li>
                ����:<input type="text" id="d1">
            </li>
            <li>
                ����:<input type="text" id="d2">
            </li>
            <li>
                �Ա�:<input type="text" id="d3">
            </li>
            <li>
                <button onclick="add()">����</button>
            </li>
        </ul>
    </div>
    <script>
        function add(){
            var storage = window.localStorage;
            var d1 = $("#d1").val();
            var d2 = $("#d2").val();
            var d3 = $("#d3").val();
            var parm = "name="+d1+"&age="+d2+"&sex="+d3;
            var dataStr = "zxc";
            storage.setItem(dataStr,parm);
            self.location="./list.html";
        }
    </script>
</body>
</html>




 


 






            

            
posted @ 
2017-09-05 13:50 
陌凌雪 
阅读(314) 
评论(0) 
 
收藏 
举报