我正在尝试学习如何使用localStorage。

部分模仿，我写了HTML，生成一个页面，可以拖放页面。

例如

<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>

我认为，像上面一行以“localStorage”开头的行，我可以在localStorage保存下降后的位置。 [目前的线路只是一个模拟的例子。 后来，当我理解这些事情时，我将实际存储位置或偏移量。]

我感到困惑的部分是关于如何在加载页面时从localStorage检索位置。

说，我将有一块瓷砖

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

我可以说瓷砖的style="position:absolute" ，然后我需要从localStorage检索偏移量并设置为div的属性。

但是怎么做最后一部分呢？

---

为了节省你使用这个javascript命令：

（假设该位置是一个有两个值（x和y位置）的数组）

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

在页面加载，你可以做这样的事情（假设你使用jQuery）：

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

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

编辑：添加JSON stringify /解析数组

如果你不想使用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];
}

编辑：循环问题：

$(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]});
  });
});

链接地址: http://www.djcxy.com/p/29463.html

上一篇: Set position of a <div> from data saved in localStorage

下一篇: ListView nested scrolling on API<21