Cómo guardar la ubicación de la imagen en localstorage

Question

Tengo una pregunta, actualmente estoy tratando de guardar la ubicación de una imagen en el almacenamiento local, pero no tengo idea de cómo hacerlo. Lo quiero en el almacenamiento local porque una vez que actualice la página, todavía quiero la imagen que arrastró, en el mismo lugar donde arrastró la imagen antes de la actualización / recarga de la página. El guión es como un inventario con elementos que son imágenes.

Este es el código:

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
}

Pero como dije, no tengo idea de cómo podría almacenar esto en el almacenamiento local correctamente y hacer que se muestre donde se arrastró la imagen antes de volver a cargar la página.

javascript image inventory

1

SpringerJerry 26 feb. 2021 a las 23:14

Answer 1

Lo implementaría así: (de esta manera puede obtener las coordenadas xey del elemento arrastrado):

function dragOver(e) {
  e.preventDefault();

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

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

}

1

Daniel Resch 26 feb. 2021 a las 20:25

Answer 2

Si desea guardar algo en localStorage, debe estar en formato de cadena.

Entonces, si quisiera guardar el primer lugar, se vería así:

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

Donde "spot1" es la clave y "0" sería el valor.

Para recuperar de localStorage:

localStorage.getItem("spot1")

Esto debería devolver "0"

2

jharris711 26 feb. 2021 a las 20:23

Cómo guardar la ubicación de la imagen en localstorage

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript