Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>LocalData Dashboard Demo</title>
  <style>
    /* Базовые стили для наглядности демо */
    body { font-family: sans-serif; max-width: 500px; margin: 40px auto; padding: 20px; }
    .tabs-menu { display: flex; gap: 10px; margin-bottom: 20px; }
    .tab { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; background: #f0f0f0; border-radius: 4px; }
    .tab.active { background: #007bff; color: white; border-color: #007bff; }
    .tab-content { display: none; padding: 20px; border: 1px solid #ccc; border-radius: 4px; }
    .tab-content.active { display: block; }
    .form-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input, select { width: 100%; padding: 8px; box-sizing: border-box; }
  </style>
</head>
<body>

  <div class="tabs-menu">
    <div class="tab" data-tab="tab-personal">Личные данные</div>
    <div class="tab" data-tab="tab-contacts">Контакты</div>
    <div class="tab" data-tab="tab-settings">Настройки</div>
  </div>

  <div id="tab-personal" class="tab-content">
    <h3>Личные данные</h3>
    <form>
      <div class="form-group">
        <label>Имя:</label>
        <input type="text" name="username" placeholder="Введите имя">
      </div>
      <div class="form-group">
        <label>Фамилия:</label>
        <input type="text" name="lastname" placeholder="Введите фамилию">
      </div>
    </form>
  </div>

  <div id="tab-contacts" class="tab-content">
    <h3>Контакты</h3>
    <form>
      <div class="form-group">
        <label>Email:</label>
        <input type="email" name="email" placeholder="example@mail.com">
      </div>
      <div class="form-group">
        <label>Телефон:</label>
        <input type="tel" name="phone" placeholder="+7 (999) 000-00-00">
      </div>
    </form>
  </div>

  <div id="tab-settings" class="tab-content">
    <h3>Настройки</h3>
    <form>
      <div class="form-group">
        <label>Язык интерфейса:</label>
        <select name="lang">
          <option value="ru">Русский</option>
          <option value="en">English</option>
        </select>
      </div>
      <div class="form-group">
        <label>Тема оформления:</label>
        <select name="theme">
          <option value="light">Светлая</option>
          <option value="dark">Тёмная</option>
        </select>
      </div>
    </form>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabs = document.querySelectorAll('.tab');
      const contents = document.querySelectorAll('.tab-content');
      const forms = document.querySelectorAll('form');

      // Шаг 1: Загрузка данных из localStorage при старте
      const savedData = JSON.parse(localStorage.getItem('dashboardData')) || {};
      const activeTabId = localStorage.getItem('activeTab') || 'tab-personal';

      // Заполняем все найденные поля сохраненными значениями
      Object.keys(savedData).forEach(name => {
        const input = document.querySelector(`[name="${name}"]`);
        if (input) input.value = savedData[name];
      });

      // Функция для переключения классов и сохранения активного таба
      function switchTab(tabId) {
        tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === tabId));
        contents.forEach(c => c.classList.toggle('active', c.id === tabId));
        localStorage.setItem('activeTab', tabId);
      }

      // Активируем вкладку, на которой остановился пользователь
      switchTab(activeTabId);

      // Шаг 2: Клик по вкладкам (делегирование на меню)
      document.querySelector('.tabs-menu').addEventListener('click', (e) => {
        const tab = e.target.closest('.tab');
        if (tab) switchTab(tab.dataset.tab);
      });

      // Шаг 3: Мгновенное автосохранение при вводе/изменении данных
      forms.forEach(form => {
        form.addEventListener('input', (e) => {
          if (e.target.name) {
            savedData[e.target.name] = e.target.value;
            localStorage.setItem('dashboardData', JSON.stringify(savedData));
          }
        });
      });
    });
  </script>
</body>
</html>