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

Posted 2020-10-05 陌凌雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了父页面从子页面调取数据并展示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>

以上是关于父页面从子页面调取数据并展示1的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()

vuejs 从子组件更新父数据

如何在html页面用a标签跳转到新页面并且用php调取数据在新页面中以表格展示出来我是个新手用a标签跳不到

mui 从子页面返回至父页面，同时刷新父页面

js中子页面父页面方法和变量相互调用