The page im experimenting with is like a simple notes page where you click a button to create divs that are movable on the page. So i want these divs to stay on the page when i reload it. How would i go about solving this issue in the best way? Ive experimented alot with localStorage but without success.

Here is simplified version of how i create and move them:

window.onload = function() {
   
   var iscklick = 0;

   function trigger(id){
      let tempid = "#div_" + id;
      $(document).on('mousemove', function(event){
         if(isclick){
         $(tempid).css({'top':event.pageY - $('#div_' + id).outerHeight() /2, 'left':event.pageX - $(tempid).outerHeight() /2});    
         }
      //mouseup makes it unstick and cleans tempid
      }).on('mouseup',function(){
         isclick = 0;
         tempid = ""
      })
    }

   $(document).ready(function(){
      
      $(".container").on('mouseover', '.element', function(){
         var id = this.id;
         var split_id = id.split("_");
         var finalid = split_id[1];
         //mousedown triggers func
         $("#div_" + finalid).on('mousedown', function(){
            isclick = 1;
            trigger(finalid);
                
         })
      })

      $(".add").click(function(){
            
         var lastid = $(".element:last").attr("id");
         var split_id = lastid.split("_");
         var nextindex = Number(split_id[1]) + 1;
     
         $(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");
    
         $("#div_" + nextindex).append("");           
            
      });
   });
};

Thanks in advance, im just trying to learn how to save states in jquery.

Ive tried alot of localStorage and looked into cookies but i dont really understand what the best way is to tackle this issue when there are so many things that need to be saved. I also plan on adding loads more and basically everything that the user does needs to stick after you reload the page.