Javascript 设置a<；部门>；从本地存储中保存的数据

我正在努力学习如何使用本地存储

部分是模仿，我编写了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>

我可以说磁贴具有

style=“position:absolute”

，然后我需要从

localStorage

检索偏移量，并将其设置为

div

的属性

但如何完成最后一部分？

要保存，请使用以下javascript命令： （假设位置是具有两个值（x和y位置）的数组）

在pageload上，您可以执行如下操作（假设您使用jquery）：

编辑：为数组添加JSON stringify/parse

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

---

我明白了<代码>（文档）。就绪是关键。这是否类似于加载（读取）页面时出现的事件？第二行设置属性。如果在某个类中循环使用所有

div

，那么写这一行会不会太难？我在上面的答案中添加了循环答案。但是请注意，您需要使用jquery来像提供的那样使用它。我现在明白逻辑了。我不知道什么是jQuery。但我会用谷歌搜索一下。

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

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

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