Set position of a <div> from data saved in localStorage

Question

I am trying to learn how to use localStorage.

Partly imitating, I have written html that generates a page with a few tiles that you can drag and drop around the page.

For example

<script type="text/javascript">

    function drag_start(event){
    var style = window.getComputedStyle(event.target, null);
    var str = (parseInt(style.getPropertyValue("left")) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top")) - event.clientY)+ ',' + event.target.id;
    event.dataTransfer.setData("Text",str);
    event.stopPropagation();
    }

    function drop(event){
    var offset = event.dataTransfer.getData("Text").split(',');
    var dm = document.getElementById(offset[2]);
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    localStorage.setItem(dm.id,dm.style.left);
    event.preventDefault();
    return false;
    }

    function drag_over(event){
    event.preventDefault();
    return false;
    }

  </script>

I think that with a line like the one above beginning with "localStorage" I can save in localStorage the position after the drop. [The current line is just a mock example. Later, when I understand these things, I will actually store the position, or the offset.]

The part that I am confused is about how to retrieve the position from localStorage when the page is being loaded.

Say, that I am going to have one of the tiles being

<div id="tile3"  draggable="true" ondragstart="drag_start(event)">
    <a href="http://www.link.somewhere">
          Link
    </a>
</div>

I can say that the tile has style="position:absolute" and then I would need to retrieve the offset from localStorage and set as a property of the div.

But how to do this last part?

Answer 1

for the saving you use this javascript command:

(assuming thePosition is an array with two values (x and y position))

localStorage.setItem("position", JSON.Stringify(thePosition));

on the pageload you can do something like this (assuming you use jquery):

$(document).ready(function(){
  var position = JSON.parse(localStorage.getItem("position"));

  $('#the-divs-id').css({'left': position[0], 'top': position[1]});
});

edit: added JSON stringify/parse for the array

If you want to use no jquery:

window.onload = setDiv();

function setDiv(){
  var position = JSON.parse(localStorage.getItem("position"));
  document.getElementById(the-divs-id).style.left = position[0];
  document.getElementById(the-divs-id).style.top = position[1];
}

edit: the looping question:

$(document).ready(function(){
  // loops trough all divs with the-class
  $('.the-class').each(function(){
    // get the id from the current div
    // and get the corresponding position from local storage
    var id = $(this).attr('id'),
        position = JSON.parse(localStorage.getItem(id));
    // sets the css values for the current div
    $(this).css({'left': position[0], 'top': position[1]});
  });
});