当页面重新加载数据时，php div项目单击

Question

i have a div name all contact in which there is many name when i click anyone name this name show me in other div name receiver its work fine problem is this when page reload name gone from reciver div which i click will you please tell me how to made it when page refresh div data not gone untill i go to other page.

#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

So you want retain the name in receiver div after page reload.

You can use 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>

Try this.