PHP DIV項目時點擊頁面重載數據不見了

Question

我有一個div名稱的所有接觸，其中有許多名字，當我點擊任何名稱，這個名稱讓我在其他分區名稱接收其做工精細的問題是這樣的，當頁面重載的名字不見了從reciver div我點擊你會告訴我如何使頁面刷新div數據沒有消失時，直到我去其他頁面。

#usersOnLine { 

font-family:tahoma; 
font-size:12px; 
color:black; 
border: 3px teal solid; 
height: 625px; 
width: 300px; 
overflow-y:scroll; 
} 
<div id='receiver'> 
<h3>receiver</h3> 
<!-- NOTICE THAT THIS IS NEW NOW... --> 
<!-- IT IS IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE --> 
<p class='bubbled-data'></p> 
</div> 
<div id = 'contact'> 
    <h1 align="left"> all contacts </h1> 
    <div id="usersOnLine"> 
     <h2> 
      <?php 
      foreach ($result as $key => $val) { 
       echo "<span class='clickAble'>" . $val['email'] . "</span>"; 
       echo "<br>"; 
       echo "<br>"; 
      } 
      ?> 
     </h2> 
    </div> 
</div> 

</div> 
<!-- JAVASCRIPT - JQUERY --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script type="text/javascript"> 

    (function ($) { 
     $(document).ready(function (e) { 
      var receiver = $("#receiver"); 
      var clickAbles = $(".clickAble"); 

      // BIND THE clickAble SPAN TO AN ON-CLICK EVENT... 
      // SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV 
      clickAbles.on("click", function (evt) { 
       var nameValue = $(this).text(); 
       receiver.find(".bubbled-data").text(nameValue); 
       $("#reciver_email").val(nameValue); 
      }); 

     }); 
    })(jQuery); 
</script> 

Answer 1

所以，你要重新加載頁面後保留在接收器格的名稱。

您可以使用HTML本地存儲，

Refer HTML Local Storage Objects

<script type="text/javascript"> 

    (function ($) { 
     $(document).ready(function (e) { 
      var receiver = $("#receiver"); 
      var clickAbles = $(".clickAble"); 

      if(window.performance) 
      { 
       if(performance.navigation.type == 1) 
       { 
        var nameValue = localStorage.getItem("nameValue"); 
        receiver.find(".bubbled-data").text(nameValue); 
        $("#reciver_email").val(nameValue); 
        receiver.find(".bubbled-data").text(nameValue); 
       } 
      } 

      // BIND THE clickAble SPAN TO AN ON-CLICK EVENT... 
      // SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV 
      clickAbles.on("click", function (evt) { 
       var nameValue = $(this).text(); 
       receiver.find(".bubbled-data").text(nameValue); 
       $("#reciver_email").val(nameValue); 

       localStorage.setItem("nameValue", nameValue); 
      }); 

     }); 
    })(jQuery); 
</script> 

試試這個。