刷新时在页面上保留数据

Question

I want to keep the data of the target ordered list before page refresh and then prepend it using jquery on document ready. Here is my code

 // if an refresh event is fired window.onbeforeunload = function(event){ //store the messages into sessionStorage sessionStorage.setItem('ol', jQuery('#messages')); return undefined; }; $(document).ready(function(){ if (sessionStorage.getItem('ol')) { // Restore the contents of the ol (message contents) var ol = sessionStorage.getItem('ol'); jQuery('#messages').html(ol); } }); 

 <div class="chat__main"> <ol id="messages" class="chat__messages"></ol> <div class="chat__footer"> <form id="message-form" action=""> <input type="text" name="message" placeholder="Message" autofocus autocomplete="off"/> <button>Send</button> </form> <button id="send-location"> Send location</button> </div> </div> 

But the code is not working as expected after refreshing the result is enter image description here

Although before refreshing it was enter image description here

Answer 1

You need to use localStorage As data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.

For sessionStorage , changes are only available per window (or tab in browsers like Chrome and Firefox). Changes made are saved and available for the current page, as well as future visits to the site on the same window. Once the window is closed, the storage is deleted.

More details on this link https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Answer 2

Thanks @charlietfl Here is what works for me

 // if an refresh event is fired window.onbeforeunload = function(event){ //store the messages into sessionStorage sessionStorage.setItem('ol', jQuery('#messages').html()); return undefined; }; $(document).ready(function(){ if (sessionStorage.getItem('ol')) { // Restore the contents of the ol (message contents) var ol = sessionStorage.getItem('ol'); jQuery('#messages').html(ol); } });