How to save image location in localstorage

Question

I have a question, currently i am trying to save a image location in the localstorage but i have no idea how to do that. I want it in localstorage because once you refresh the page i still want the image that you dragged, in the same spot as where you dragged the image to before the page refresh/reload. The script is like a inventory with items that are images.

This is the code:

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
}

But like i said i have no idea how i could store this in localstorage correctly, and make it display were the image was dragged to before the page reload.

Answer 1

I would implement it like this: (this way you can get x and y coordinates of the dragged element):

// 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";

    }

});

Answer 2

If you want to save something to localStorage, it has to be in string format.

So, if you wanted to save spot one, it would look like:

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

where "spot1" is the key and "0" would be the value.

To retrieve from localStorage:

localStorage.getItem("spot1")

This should return "0"