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

i trying learn how use localstorage.

partly imitating, have written html generates page few tiles can drag , drop around 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 line 1 above beginning "localstorage" can save in localstorage position after drop. [the current line mock example. later, when understand these things, store position, or offset.]

the part confused how retrieve position localstorage when page being loaded.

say, going have 1 of tiles being

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

i can tile has style="position:absolute" , need retrieve offset localstorage , set property of div.

but how last part?

for saving use javascript command:

(assuming theposition array 2 values (x , y position))

localstorage.setitem("position", json.stringify(theposition)); 

on pageload can (assuming 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 array

if want 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: looping question:

$(document).ready(function(){   // loops trough divs the-class   $('.the-class').each(function(){     // id current div     // , corresponding position local storage     var id = $(this).attr('id'),         position = json.parse(localstorage.getitem(id));     // sets css values current div     $(this).css({'left': position[0], 'top': position[1]});   }); });