How Can I Keep This Div Upon Refresh? : Webdev

var bubble = `
                   <div class = "bubble" id="bubble${driver_id}"
                   style = "top:${counter * 100}px">
                   ${driver_name}<br>
                   ${time}
                   <a class ="${driver_id}" id = "homeDriver">
                   <span class = "icon home"></span>
                   </a>
                   <a class="${driver_id}" id="notifyDriver">
                   <span class="icon comments"></span>
                   </a>
                   <a class="${driver_id}" id="pauseDriver">
                   <span class ="icon pause"></span>
                   </a>
                   <a class="${driver_id}" id="show">
                   <span class="icon list"></span>
                   </a>
                   <span class ="icon closeBubble" id = "closeBubble"></span>
                   </div>`

$("#driverBubble").append(bubble);
                      counter++;

r/webdev - How can I keep this div upon refresh?

Bubble that is being created

I am trying to find a way to keep this Bubble on the page even after a refresh. I have tried using LocalStorage by using to store the data

$(function(){
                     localStorage["myKey"] = $('.bubble')[0].outerHTML;
                   });

Then I use a button that is temporary to call it back from Local Storage. That works great. However, I am unable to bring the bubble back unless I send another request. I am out of ideas. Any help would be greatly appreciated!

$("#callLocal").click(function(){
   if(localStorage["myKey"] != null){
     var contentsOfOldDiv = (localStorage["myKey"]);
     $("bubble").html(contentsOfOldDiv);
     console.log("test");
   }
   else{
     console.log("Testing");
   }
 });

Source link