javascript - 如何保存拖放到本地存储？

Question

我正在学习 JavaScript。有一个代码可以移动 block 。但我无法将其保存在localStorage 中。帮助!

let drag = document.querySelector('.note');
drag.onmousedown = function(e) {
  let coord = getCoord(drag);
  let shiftX = e.pageX - coord.left;
  let shiftY = e.pageY - coord.top;
  drag.style.position = 'absolute';
  document.body.appendChild(drag);
  moveNote(e);
  drag.style.zIndex = 1000;

  function moveNote(e) {
    drag.style.left = e.pageX - shiftX + 'px';
    drag.style.top = e.pageY - shiftY + 'px';
  }
  document.onmousemove = function(e) {
    moveNote(e);
  };
  drag.onmouseup = function() {
    document.onmousemove = null;
    drag.onmouseup = null;
  };
}

function getCoord(elem) {
  let main = elem.getBoundingClientRect();
  return {
    top: main.top,
    left: main.left
  };
}

.note {
  width: 50px;
  height: 50px;
  background: red;
}

<div class="note">
</div>

Answer 1

这似乎是一个非常简单的过程。

鼠标悬停时，获取 left 和 top 属性并将它们的值保存到 localStorage:

document.addEventListener("mouseup", () => {
  localStorage.setItem("top", drag.style.top);
  localStorage.setItem("left", drag.style.top);
});
let coordinates = localStorage["top"] + "," + localStorage["left"];
if (localStorage["top"] && localStorage["left"]) {
  drag.style.top = coordinates.split(",")[0];
  drag.style.left = coordinates.split(",")[1];
}

或者更快的方法

document.addEventListener("mouseup", () => {
  localStorage.setItem("coordinates", drag.style.top + "," + drag.style.left);
});
let coordinates = localStorage["coordinates"];
if (localStorage["coordinates"]) {
  drag.style.top = coordinates.split(",")[0];
  drag.style.left = coordinates.split(",")[1];
}