把当前页面内容 传到 另一个页面 方式有以下

 

简述:方法一:方法二:

详情:

方法一:把内容通过 链接 的形式来传递 ( 注意内容比较短的时候可以使用:


    (1)当前页面链接是xx.com/01.html: 代码如下:


          <div class="title">产品001</div>
         <div class="width">66px</div>

          <div class="cursor-p" id="OrdeSubmit">Orde Submit</div>
       <script>

           document.getElementById("OrdeSubmit").addEventListener("click", function() {

               var quotetitle = document.querySelector(".title").textContent.trim();

               var quotewidth = document.querySelector(".width").textContent.trim();


               var BuyDataUrl = `https://xx.com/02buy?title=${encodeURIComponent(quotetitle)}&width=${encodeURIComponent(quotewidth)}`;


              window.location.href = BuyDataUrl;

          })

       </script>

 ( 2)页面跳转后的页面xx.com/02buy.html,接受时代码如下:


           

                       <div class="cs-list cp-title"></div>

                       <div class="cs-list">width:&nbsp;<span class="cp-width"></span></div>


          

          <script>

               document.addEventListener("DOMContentLoaded", function() {

                      // 获取 URL 参数

                     var params = new URLSearchParams(window.location.search); //内容接受

                     var quote = params.get("title"); // 获取 'quote' 参数的值

                     var width = params.get("width"); // 获取 'quote' 参数的值

                     // 如果参数存在,则填充到 .cp-title

                    if (quote) {

                         document.querySelector(".cp-title").textContent = decodeURIComponent(quote);

                         document.querySelector(".cp-width").textContent = decodeURIComponent(width);

                    }

               })

       </script>














方法二:用 localStorage 传递数据递

 ( 如果 URL 里不方便放太多数据,可以用 localStorage 存数据,在详情页读取。)

(1)当前页面链接是xx.com/01.html: 代码如下:

            

         <div class="title">

              <div class="text-box">
                <p calss="text-t">标题会尽快哈士大夫艰苦户籍科 <img src="icon" alt="标题图标"></p>
                <p calss="text-des">简短文本 标题会尽快哈士大夫艰苦户籍科</p>

              </div>

         </div>


         <div class="width title2">

                 <div class="text-box">
                     <p calss="text-t">标题会尽快哈士大夫艰苦户籍科 <img src="icon" alt="标题图标"></p>
                    <p calss="text-des">简短文本 标题会尽快哈士大夫艰苦户籍科</p>

                  </div>

           </div>

          <div class="cursor-p" id="OrdeSubmit">Orde Submit</div>


                <script>

                          document.getElementById("OrdeSubmit").addEventListener("click", function() {
                            var title = document.querySelector(".title").innerHTML;
                             var title2 = document.querySelector(".title2").innerHTML;

                                let packageData = {

                                    titlehtml: title,

                                    title2html: title2,

                                };

                                   localStorage.setItem("packageData", JSON.stringify(packageData));

                                   window.location.href = "https://xx.com/02buy.html"; 

                                })

            

                   </script>





 ( 2)页面跳转后的页面xx.com/02buy.html,接受时代码如下:

             <div class="title-data"></div>
              <div class="title2-data"></div>

 

          <script>

               document.addEventListener("DOMContentLoaded", function() {

                      // 获取 URL 参数

                        let packageData = JSON.parse(localStorage.getItem("packageData"));

                        if (packageData) {

                            console.log("数据:", packageData);

                        

                            // 直接从 packageData 获取数据,而不是用 params.get()

                            let titlehtmlnr = packageData.titlehtml;

                            let title2htmlnr = packageData.title2html;

                        

                            // 插入到页面里

                            document.querySelector(".title-data").innerHTML = titlehtmlnr;

                            document.querySelector(".title2-data").innerHTML = title2htmlnr;

                        }

               })

       </script>