javascript - 如何存储/检索元素移动的最后位置？

Question

目前我正在使用这段代码:

var mousePosition;
var offset = [0,0];
var div;

var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";  
div.style.top = "0px";
div.style.width = "237px";
div.style.height = "50px";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "blue";
div.id = "clock";

document.body.appendChild(div);


div.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
    div.offsetLeft - e.clientX,
    div.offsetTop - e.clientY
];
}, true);

document.addEventListener('mouseup', function() {
isDown = false;
}, true);


document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
    mousePosition = {

        x : event.clientX,
        y : event.clientY

    };
    div.style.left = (mousePosition.x + offset[0]) + 'px';
    div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

该代码允许我使用鼠标移动一个 div。我对 JavaScript 不是很有经验。

但我希望有一种简单的方法来缓存 Div 的结束位置。这样当我关闭并打开 HTML 文件时，Div 将从其最后缓存的位置开始。

谢谢。

Answer 1

您可以使用 localStorage将位置信息缓存到您的浏览器中。

window.localStorage.setItem('divPosition', JSON.stringify({
  left: div.style.left, 
  top: div.style.top
}));

console.log(JSON.parse(window.localStorage.getItem('divPosition')));

需要注意的是，localStorage 不可靠地接受字符串值以外的任何内容，因此添加更可靠的信息需要对数据进行字符串化和解析。