Здравствуйте.
Вопрос начинающего. Есть разметка:
<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 сохранялось в разметке страницы навсегда, пока целенаправленно не будет изменено повторно?
Подскажите пожалуйста.
