我正在尝试学习如何使用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>
我可以说tile有style =“position：absolute”然后我需要从localStorage中检索偏移并设置为div的属性.
但是如何做最后一部分呢？
解决方法
为了节省您使用此javascript命令：
(假设thePosition是一个有两个值(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 / 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]});
});
});
