Пользователь редактирует текст, кнопка "сохранить" создает запись измененного текста в Local Storage c ключом в виде значения времени сохранения. Задача такая-с помощью select дать пользователю возможность выбрать запись для редактирования. Я сделал так-через цикл получаю ключи записей в select и создаю новые option для select. Как сделать так, чтобы при выборе определенного ключа его контент отображался в текстовом блоке программы?
var editBtn = document.getElementById('edit');
var saveBtn = document.getElementById('save');
var cancelBtn = document.getElementById('cancel');
var editables = document.querySelector('.text');
var storyList = document.querySelector('.story-list');
var lSLength = localStorage.length;
// объявление функции вывода загрузки элементов из localStorage в DOM после обновления страницы
function createSelectOption() {
if(lSLength > 0) {
for (i = 0; i < lSLength; i++) {
var key = localStorage.key(i);
var o1 = document.createElement('option');
storyList.appendChild(o1);
o1.textContent = key;
}
}
}
createSelectOption();
Data = new Date();
Hour = Data.getHours();
Minutes = Data.getMinutes();
Seconds = Data.getSeconds();
if (typeof (Storage) !== "undefined") {
if (localStorage.getItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds) !== null) {
editables.textContent = localStorage.getItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds);
}
}
function toggleDisabled() {
editBtn.toggleAttribute("disabled");
saveBtn.toggleAttribute("disabled");
cancelBtn.toggleAttribute("disabled");
}
editBtn.addEventListener('click', function (_e) {
if (!editables.isContentEditable) {
editables.contentEditable = true;
toggleDisabled();
}
});
// сохраняем данные в localStorage
saveBtn.addEventListener('click', function (_e) {
localStorage.setItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds, editables.textContent);
editables.contentEditable = false;
toggleDisabled();
});
cancelBtn.addEventListener('click', function (_e) {
editables.contentEditable = 'false';
editables.textContent = localStorage.getItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds);
toggleDisabled();
});
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web API</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<h1 class="heading">Осваиваем<span class="badge badge-secondary">Web API</span></h1>
<div class="wrapper">
<div class="main-content">
<select name="story-list" class="story-list"></select>
<p class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae
impedit tempore a odio culpa, fuga quas laborum. Eligendi error alias,
optio, possimus, maiores veniam nulla repellendus aliquam officiis
maxime commodi! Eum reprehenderit quisquam nisi inventore. Saepe et
nulla quae voluptate, vero cum ullam autem tempore quaerat porro
inventore blanditiis aliquam eum assumenda consequatur a omnis
corporis, velit obcaecati labore magni? Aut dolorum vero voluptate
nesciunt eius ut fugit, corrupti necessitatibus. Impedit tenetur,
dolore debitis aperiam harum non suscipit odio culpa, fugit atque
cupiditate illum, enim repudiandae deleniti mollitia tempora deserunt?
</p>
<button type="button" id="edit" class="btn btn-primary">Редактировать</button>
<button type="button" id="save" class="btn btn-success" disabled>Сохранить</button>
<button type="button" id="cancel" class="btn btn-danger" disabled>Отмена</button>
</div>
</div>
</div>
</body>
</html>