How to make the position of a moving div be saved automatically?

Question

I developed a widget for my project and now I need that, when moving it, your position is saved.

Example: Initial widget position 80px x 120px, after moving it, initial widget position 210px x 300px.

I hope my doubt becomes clear.

Answer 1

If I understand your question, you have a div that scrolls over the page and you want always the last position occupied by it to be saved by loading the page again, correct? Well, if that’s what it is, I developed a script and using the localStorage except the last position, left and top, of div.
It will not be possible to implement the code in the Stackoverflow snippet because it does not allow the use of the localStorage for security reasons.
You can see the implementation working perfectly on jsfiddle.

Script:

window.addEventListener('DOMContentLoaded', function() {
  var box = document.getElementById('box');
  var draggable = false;
  var bLeft = localStorage.getItem('bLeft') || '';
  var bTop = localStorage.getItem('bTop') || '';

  box.style.left = bLeft;
  box.style.top = bTop;

  box.addEventListener('mousedown', function() {
    draggable = true;
  });

  window.addEventListener('mouseup', function() {
    draggable = false;
  });

  window.addEventListener('mousemove', function(e) {
    if(draggable) {
      box.style.left = (e.clientX - 50) + 'px';
      box.style.top = (e.clientY - 50) + 'px';

      localStorage.setItem('bLeft', box.style.left);
      localStorage.setItem('bTop', box.style.top);

    }
  });
});

See working on jsfiddle

Reference: MDN - localStorage