如何在本地存储中保存图像位置

Posted 2023-02-15

【中文标题】如何在本地存储中保存图像位置

【英文标题】：How to save image location in localstorage

【发布时间】：2021-05-29 05:08:23

【问题描述】：

我有一个问题，目前我正在尝试将图像位置保存在本地存储中，但我不知道该怎么做。我希望它在本地存储中，因为一旦您刷新页面，我仍然想要您拖动的图像，与您在页面刷新/重新加载之前将图像拖动到的位置相同。该脚本就像一个包含图像项目的库存。

这是代码：

const fill1 = document.querySelector('#item1');
const empties1 = document.querySelectorAll('#block1');
const empties2 = document.querySelectorAll('#block2');

const spot1 = document.getElementById("block1")
const spot2 = document.getElementById("block2")

checkSpot1()
checkSpot2()


localStorage.spot1 = 1
localStorage.spot2 = 0

// Fill listeners
fill1.addEventListener('dragstart', dragStart);
fill1.addEventListener('dragend', dragEnd);

// Loop through empty boxes and add listeners
for (const empty of empties1) 
  empty.addEventListener('dragover', dragOver);
  empty.addEventListener('dragenter', dragEnter);
  empty.addEventListener('dragleave', dragLeave);
  empty.addEventListener('drop', dragDrop);


for (const empty of empties2) 
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
  

// Drag Functions
function dragStart() 
  this.idName += ' hold';
  setTimeout(() => (this.idName = 'invisible'), 0);


function dragEnd() 
  this.idName = 'fill1';


function dragOver(e) 
  e.preventDefault();


function dragEnter(e) 
  e.preventDefault();
  this.idName += ' hovered';


function dragLeave() 
  this.idName = 'empties1';
  this.idName = 'empties2';


function dragDrop() 
    this.idName = 'empties1';
    this.idName = 'empties2';
    this.append(fill1);;


function checkSpot1() 
if (localStorage.getItem("spot1") == 1) 
   



function checkSpot2() 
if (localStorage.getItem("spot2") == 1) 
  



spot1.addEventListener('dragend', setspot1)
spot2.addEventListener('dragend', setspot2)

function setspot1()
localStorage.spot1 = 1
localStorage.spot2 = 0


function setspot2()
localStorage.spot1 = 0
localStorage.spot2 = 1

但就像我说的那样，我不知道如何正确地将其存储在本地存储中，并使其在页面重新加载之前被拖动到图像时显示。

【问题讨论】：

您遇到的错误是什么？

我没有收到任何错误，我只是希望有人可以告诉我如何。

【参考方案1】：

如果您想将某些内容保存到 localStorage，it has to be in string format。

所以，如果你想保存第一个位置，它看起来像：

localStorage.setItem("spot1", "0")

其中“spot1”是键，“0”是值。

从 localStorage 中检索：

localStorage.getItem("spot1")

这应该返回“0”

【讨论】：

您还可以将对象转换为字符串，这样您就可以拥有更多变量。

它会自动转换数据类型。例如：window.localStorage.setItem("spot1",1);会将数字转换为字符串，但它仍然可以正常工作

【参考方案2】：

我会这样实现它：（这样你可以得到拖动元素的 x 和 y 坐标）：

// this is for storing --> 
function dragOver(e) 
  e.preventDefault();

  // Get the x and y coordinates 
  var x = e.clientX; 
  var y = e.clientY; 

  // store the value in localStorage
  window.localStorage.setItem('x',x); 
  window.localStorage.setItem('y',y); 




// => same as JQuerys document.ready(); 
document.addEventListener("DOMContentLoaded", function(event)  

    // read the data from localstorage 
    var x = window.localStorage.getItem('x'); 
    var y = window.localStorage.getItem('y'); 

    // Now you have to set the element position to the stored values
    // I am assuming you want to set it for block1, and that block1 has absolute 
    // positioning 

    // only set the position if there is already a value stored
    if( x && y )
    

       // I found a pure javascript solution now
       document.getElementById("block1").style.left = x+"px";
       document.getElementById("block1").style.top = y+"px";

    

);

【讨论】：

快速提问，新位置存储后如何显示？