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++;
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");
}
});