Текстовый редактор на JS. Вывод истории изменений

Question

Есть простой текстовый редактор с возможностью сохранения контента в LocalStorage. Сохраняю каждое изменение текста со временем изменения. Нужно добавить возможность при перезагрузке страницы выбрать через изменение, с которым продолжить работать, то есть каждое изменение будет , что и пытаюсь сделать, но не получается добавить.

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');

Data = new Date();
Hour = Data.getHours();
Minutes = Data.getMinutes();
Seconds = Data.getSeconds();

let storis = localStorage.setItem('изменение в ' + Hour + ":" + Minutes + ":" + Seconds, editables.textContent);

if (typeof (Storage) !== "undefined") {
  if (localStorage.getItem('story') !== null) {
    editables.textContent = localStorage.getItem('story');

    let o1 = document.createElement('option');
    storyList.appendChild(o1);
    o1.innerHTML = '<option></option>'
    o1.textContent = storis;
  }
}

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('story ' + Hour + ":" + Minutes + ":" + Seconds, editables.textContent);
  editables.contentEditable = false;
  toggleDisabled();
});

cancelBtn.addEventListener('click', function (_e) {
  editables.contentEditable = 'false';
  editables.textContent = localStorage.getItem('story');
  toggleDisabled();
  });

html,
body {
    box-sizing: border-box;
    background: #e5e5e5;
}

.heading {
    margin-top: 70px;
    text-align: center;
}

.wrapper {
    display: flex;
    justify-content: center;
}

.main-content {
    margin-top: 40px;
    padding: 50px;
    flex: 0 0 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;

}

.text {
    text-align: justify;
    
}

[contenteditable="true"] {
    color: #C00;
}

.btn-success[disabled],
.btn-danger[disabled],
.btn-primary[disabled] {
    cursor: not-allowed;
}

<!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 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>

БЛОГ НА HUSL

Текстовый редактор на JS. Вывод истории изменений

Ответы (0 шт):