Как сохранить объект в LocalStorage и при перезагрузке страницы сгенерировать этот объект?

Question

[Алексей Юдов]

Всем доброго времени суток!

Сразу к сути: Есть объект, не с самой изящной реализацией. Так вот, есть у меня желание записать этот объект в LocalStorage и тут самое интересное. При записи(перезаписи) этого объекта в LocalStorage должно происходить следующее:

- Создается div с каким то классом ;// Не обязательно чтобы это был div
- Между этим блоком, надо вставить html код, который храниться в свойстве объекта ;
- Создать несколько таких блоков кол-во которых указанно в свойстве объекта "Count" ;

Вопрос:
Как сгенерировать этот объект, чтобы это не было костылем, как представлено в коде ниже?

var I = 0; // Итератор для кол-во объектов
var Item = {
	"tag": "div",
	"html": "<span>Somthing text</span>",
	"count": I
};

function addItemToLocalStorage() {  // Функция добавляющая объекты в LocalStorage
    I++;
    Item.count = I;
    var sItem = JSON.stringify(Item);
    localStorage.setItem("State",sItem);
}

function GenerateObjFromLocalStorage() {  // Функция генерирующая блоки
	var container = document.getElementById("items-container");
	for(j = 0; j < Item.count; j++){
        var newDiv = document.createElement(Item.tag);
        newDiv.classList.add("item"+I, "items")
		container.appendChild(newDiv);
	}
}

Comments

[Kovalsky]

"Функция генерирующая объекты" - не объекты, а элементы.

Answer 1

[heartdevil]

При добавлении item-а, надо его просто передавать в качестве входного параметра

addItemToLocalStorage(item)

а внутри вы сначала делаете

var storage = JSON.pare(sItem);

Добавляете свой item

storage.push(item)

и опять в строку:

sItem = JSON.stringify(Item);

и в хранилище:

localStorage.setItem("State",sItem);

Код условный. Доработаете под свои нужды

Answer 2

[Роман]

<script>
    const obj = {
      count: 3,
      toString() {
        return `<ul><li>TEXT</li></ul>`;
      }
    }
    localStorage.clear();
    localStorage.setItem('obj', obj);
    for (let i = 0; i < obj.count; i++) {
      let div = document.createElement('div');
      div.className = 'cla_ss';
      div.innerHTML = localStorage.getItem('obj');
      document.body.append(div);
    }
  </script>

Comments

[Алексей Юдов]

Хранить HTML код в объекте это не костыль?

[Роман]

Алексей Юдов, ну что первое в голову пришло после прочтения тз. К тому же localStorage хранит строку в значении и получить её обратно не сложно..то почему бы и нет)