Почему сбрасываются изменения в textContent HTML-разметки после обновления страницы? Как этим управлять?

Question

[Reflections]

Здравствуйте.

Вопрос начинающего. Есть разметка:

<div class="container">
		<div class="p text-1">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse odit quidem
			similique,
			quas dolores officiis porro magnam quia, maxime reprehenderit repudiandae officia fugit beatae. Neque
			temporibus expedita quo a.
		</div>
		<div class="p text-2">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum labore eos cum
			dicta rem?
			Hic delectus animi quidem recusandae labore nihil doloremque et qui. Facilis recusandae quisquam sapiente
			labore id.
		</div>
	</div>
	<div class="container">
		<div class="editor-wrap">
			<div class="editor-item">
				<textarea type="text" class="editor-1"></textarea>
				<button type="button" class="btn--edit-1">Редактировать 1-й абзац</button>
			</div>
			<div class="editor-item">
				<textarea type="text" class="editor-2"></textarea>
				<button type="button" class="btn--edit-2">Редактировать 2-й абзац</button>
			</div>
		</div>
	</div>

Есть скрипт:

let btnEditor1 = document.querySelector('.btn--edit-1'),
	 btnEditor2 = document.querySelector('.btn--edit-2'),
	 textArea1 = document.querySelector('.editor-1'),
	 textArea2 = document.querySelector('.editor-2'),
	 text1 = document.querySelector('.text-1'),
	 text2 = document.querySelector('.text-2');

btnEditor1.addEventListener('click', function() {
		text1.textContent = textArea1.value;
		textArea1.value = '';
	}
});

btnEditor2.addEventListener('click', function() {
	text2.textContent = textArea2.value;
	textArea2.value = '';
});

Сделано все в рамках обучения. Не настоящий проект.

После обновления страницы, текст внутри HTML-абзацев меняется на тот, что в исходном коде указан по умолчанию. Как управлять этим?
Как сделать, чтобы то, что я ввел в textarea сохранялось в разметке страницы навсегда, пока целенаправленно не будет изменено повторно?

Подскажите пожалуйста.

Comments

[Сергей Сергей]

localStorage, читайте.

Answer 1

[ThunderCat]

Как сделать, чтобы то, что я ввел в textarea сохранялось в разметке страницы

Куки, локалсторэйдж. По сути вы не можете изменить саму страницу через код, так как жс не умеет локально писать на диск без спроса (секюрити, и все вот это). При изменении странички через жс меняется только ее копия в оперативной памяти, сам исходный документ остается неизменным. Но для локального хранения придумали защищенные хранилища данных, котрые хранят текстовое представление каких-то данных (куки и локалсторэйдж).

навсегда, пока целенаправленно не будет изменено повторно?

Есть ограничения, во первых на длину данных, во вторых - срок жизни и принудительная очистка куки. Так что "навсегда" звучит слишком монументально, но думаю вам подойдет и просто на длительный срок )

Comments

[Reflections]

А по какой логике в таком случае работает изменение контента сайта через админ-панель?

Например я зашел в админ-панель, решил поменять текст страницы. И он останется таким, каким я его поменял, пока я вновь этого не сделаю. Правильно ведь? Как этот процесс происходит, если под лупой посмотреть?

Очень интересно было бы узнать, спасибо за ответ.

[ThunderCat]

Reflections, Блин, я вижу у вас совсем все плохо...

по какой логике в таком случае работает изменение контента сайта через админ-панель?

По логике хранения данных на сервере. Данные отправляются на сервер, пишутся в бд, и при следующем обновлении вытаскиваются и вставляются в нужные места. Но к чистому хтмл и жс это неприменимо, так как нужно писать кучу серверного кода, создавать структуры бд, писать запросы и вот это все, тема обширная, писать можно бесконечно. Собственно все можно описать и найти по ключевому слову "бэкенд".

[Reflections]

Да, видимо плохо, Вы правы :)
Пытаюсь основательно подходить к каждому моменту в обучении пока все от и до не пойму - вопросы задавать не перестаю.

Спасибо, буду изучать localStorage и sessionStorage.

Про БД понял. Предполагал, что примерно так и работает.