php div item click when page reload data gone

Question

У меня есть имя div, все контакты, в которых есть много имени, когда я нажимаю на кого-нибудь это имя, покажите мне в другом получателе имени его работы, прекрасная проблема, это когда страница перезагружает имя go из reciver 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

Таким образом, вы хотите сохранить имя в приемнике div после перезагрузки страницы.

Вы можете использовать HTML Local Storage,

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> 

Попробуйте это.