Storing texts + positions in local storage

programming
1

Hello Kirupa
Thanks for your great site

I am NOT a proffesional coder but I can learn and try to adupt to my needs, and I need your help.

Now I want to build a tool called Future Wheel https://www.mindtools.com/pages/article/futures-wheel.htm

I learned the chapters at
https://www.kirupa.com/html5/drag.htm
https://www.kirupa.com/html5/examples/drag_multiple.htm

I found in the forum some ways to do it and I took idea also from https://mdn.github.io/dom-examples/web-storage/

I formated the circles as TEXTAREAs

Here are my Demos:

  1. http://dialogim.com/ofan
    It saves the text to local storage (till I click the Clear button)

  2. http://dialogim.com/ofan/store-position.html
    It saves the circles position to local storage (till I click the Clear button)

My question is how I can combine the two demos into one.
I want that it will store the texts and the elements positions.

Thanks

2

Hi @ran09 - welcome to the forums! Glad you like the content :slight_smile:

Regarding the content, I think you have the hard parts already figured out. I would combine the data you are storing for each circle into one object. Something like this:

// get all circles
let elements = document.querySelectorAll("items");

for (let i = 0; i < elements.length; i++) {
  let el = elements[i];

  // get text value
  let el_text = el.querySelector("p");

  let data = {
    textValue: el_text.value,
    xOffset: localStorage.getItem('el_x'),
    yOffset: localStorage.getItem('el_y')
  }
}

This a generic approach, but does this help?

Cheers,
Kirupa

3

@kirupa Thank you so much. It was realy fast
I will learn this approach and how (and where) exactly I make it…
Sure I will share it here
Thanks again

1 Like