Как сохранить текущее состояние HTML страницы?

Question

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

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

Сразу к сути: Есть HTML-page, на которой размещены два элемента управления. Первый - добавляет элемент(например div), второй - удаляет последний.

Теперь о сложном: После того как я создал div при помощи кнопки, блок добавился, тут все верно, но после того как я обновляю страницу DOM страницы возвращается в исходное состояние.

Вопрос: Как изменять DOM HTML-документа и при этом сохранять это состояние?

Answer 1

[Roman K]

Сохранять стейт в localStorage

Answer 2

[Егор Живагин]

В localStorage сохраняйте JSON (можно JS объект) вида

{
    newDiv: 1 // кол-во новых блоков
}

При загрузке страницы проверяете это значение и добавляете нужноо кол-во блоков

Comments

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

Посмотрите что я выше написал? Это приемлемо в рамках поставленной задачи?

[Егор Живагин]

Алексей Юдов, хранить html в localStorage - это костыль.

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

Егор Живагин, значит надо все пихнуть в объект???

[Егор Живагин]

Алексей Юдов, не всё. Не надо пихать в объект html, положите в объект только значимые параметры - количество элементов, тип элементов, .... То, что вы считаете необходимым. А при загрузке страницы проверяйте эти параметры и генерируйте нужные элементы, а затем просто вставляйте

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

Что то похожее???

var Item = {
 tag: "div",
 count:  "n"
}

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

Егор Живагин, не понимаю как это написать. Не надо на блюдечке мне это подавать, можете меня направить в нужном направлении?

[Егор Живагин]

Алексей Юдов, да, можно так, а потом просто сохранить
localStorage.setItem("State", Item);

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

Егор Живагин, у меня получилось что то подобное

var I = 0;
var Item = {
	"tag": "div",
	"html": "something html code",
	"count": I
};

function addItemToLocalStorage() {
    Item.count++;
    I++;

    var sItem = JSON.stringify(Item);
    localStorage.setItem("State",sItem);
}

Егор, теперь у меня сложность с тем как генерировать этот объект...

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

Егор Живагин, если у меня есть подобный объект, то ф-я генерирующая этот объект при загрузке страницы, в моем понимании, делает следующее :
1. Создает в нужном мне месте теги
2. В созданный div вставляет содержимое из свойства объект "html"
3. Кол-во созданных div-ов определяет свойство объекта "count"

Вот если что сам объект

var Item = {
  "tag": "div",
  "html": "something html code",
  "count": 10
};

...но это как мне кажется опять костылъ...

[Егор Живагин]

Алексей Юдов, у вас есть код, который по клику на кнопку создаёт блок, правильно? Вынесите его в отдельную "создающую" функцию, если у вас её пока нет.

Я думаю, вам в localStorage вообще можно просто count хранить.
При загрузке страницы вы:
-- проверяете localStorage, считываете count
-- запускаете "создающую" функцию нужное кол-во раз.

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

Егор Живагин, так если объект хранит только одно свойство, стоит ли делать глобальную переменную вместо объекта?

[Егор Живагин]

Алексей Юдов, это не обязательно, но можно, чтоб быстрее было что-либо добавить, если понадобится в дальнейшем

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

Егор Живагин, посмотрите пожалуйста код. Как вам такая реализация?

JavaScript Code

var I = 0;
var Item = { "count": I };

function CreateNewItem() {
    Item.count++;
	var NewItem = document.createElement("div");
    var Container = document.getElementById("items-container");

	NewItem.classList.add("items");
	NewItem.innerHTML = "<h1>Work!</h1>";
	Container.appendChild(NewItem);
	localStorage.setItem("ItemCount", Item.count);
}

function Build(Count) {
	for (var i = 0; i < Count; i++){ CreateNewItem(); }
}

window.onload = function (){
    var AddNewItem = document.getElementById("AddItem");
    var CleanUpLocalStorage = document.getElementById("ClearLocalStorageButton");
    I = localStorage.getItem("ItemCount", Item.count);
	Build(I);

	AddNewItem.onclick = function () {
		CreateNewItem();
		return false;
    };
	
	CleanUpLocalStorage.onclick = function () {
		localStorage.clear();
	};
};

HTML Code

<div class="control-panel">
		<input class="control-button-css circle-button" type="button" value="+" id="AddItem">
		<input class="control-button-css circle-button" type="button" value="-" id="DeleteItem">
		<input class="control-button-css" type="button" value="Clear LocalStorage" id="ClearLocalStorageButton">
	</div>
	<div class="content-container" id="items-container">

	</div>

	<script type="text/javascript" src="script.js"></script>

Приложение
CSS Code

body{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	box-sizing: border-box;
	background-color: #f0f0f0;
	font-family: "Calibri", sans-serif;
}

.control-panel{
	width: 100%;
	height: auto;
	position: relative;
	padding: 10px;
	margin: 0 auto;
	background-color: #4286f4;
	color: #fff;
}

.control-button-css{
	outline: none;
	border: none;
	background-color: rgba(0,0,0,0);
	color: inherit;
	cursor: pointer;
}

.circle-button{
	width: 30px;
	height: 30px;
	position: relative;
	background: #fff;
	color: #4286f4;
	border-radius: 100%;
	font-size: 1.5em;
	font-weight: 600;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px rgba(0,0,0,.5);
}
.circle-button:active{
	box-shadow: 1px 1px 2px rgba(0,0,0,0);
}

.items{
	width: 80%;
	height: auto;
	position: relative;
	padding: 10px;
	margin: 10px auto;
	background: #ffffff;
	color: #222;
	font-family: "Tw Cen MT", sans-serif;
	font-size: 1em;
	font-weight: 600;
	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
}

Конечная реализация: