Как реализовать сохранение состояния и действий кнопки при перезагрузке страницы?

Есть несколько способов реализовать сохранение состояния кнопки и скрытого блока при обновлении страницы. Здесь приведены два примера с использованием JavaScript и HTML5 Local Storage.

1. Использование JavaScript:
Шаг 1: Создайте элементы HTML для кнопки и скрытого блока.
```html
<button id="myButton">Кнопка</button>
<div id="myBlock" style="display:none;">Скрытый блок</div>
```
Шаг 2: Создайте скрипт JavaScript для сохранения и восстановления состояния кнопки и блока.
```javascript
// Получите кнопку и блок по их id
var myButton = document.getElementById('myButton');
var myBlock = document.getElementById('myBlock');

// Проверьте, есть ли сохраненное состояние кнопки и блока в Local Storage
if (localStorage.getItem('buttonState') === 'active') {
  myButton.classList.add('active'); // добавьте класс active для активного состояния кнопки
  myBlock.style.display = 'block'; // отобразите скрытый блок
}

// Обработчик события для кнопки
myButton.addEventListener('click', function() {
  if (myButton.classList.contains('active')) {
    myButton.classList.remove('active');
    myBlock.style.display = 'none';
    localStorage.setItem('buttonState', 'inactive'); // сохраните состояние кнопки в Local Storage
  } else {
    myButton.classList.add('active');
    myBlock.style.display = 'block';
    localStorage.setItem('buttonState', 'active');
  }
});
```

2. Использование HTML5 Local Storage:
Шаг 1: Создайте элементы HTML для кнопки и скрытого блока.
```html
<button id="myButton">Кнопка</button>
<div id="myBlock" style="display:none;">Скрытый блок</div>
```
Шаг 2: Используйте атрибут data-* для сохранения состояния кнопки и блока.
```html
<button id="myButton" data-state="inactive">Кнопка</button>
<div id="myBlock" style="display:none;">Скрытый блок</div>
```
Шаг 3: Создайте скрипт JavaScript для обновления состояния кнопки и блока при загрузке страницы.
```javascript
// Получите кнопку и блок по их id
var myButton = document.getElementById('myButton');
var myBlock = document.getElementById('myBlock');

// Проверьте, есть ли сохраненное состояние кнопки и блока в Local Storage
if (localStorage.getItem('buttonState') === 'active') {
  myButton.setAttribute('data-state', 'active'); // установите атрибут data-state для активного состояния кнопки
  myBlock.style.display  = 'block'; // отобразите скрытый блок
}

// Обработчик события для кнопки
myButton.addEventListener('click', function() {
  if (myButton.getAttribute('data-state') === 'active') {
    myButton.setAttribute('data-state', 'inactive');
    myBlock.style.display = 'none';
    localStorage.setItem('buttonState', 'inactive'); // сохраните состояние кнопки в Local Storage
  } else {
    myButton.setAttribute('data-state', 'active');
    myBlock.style.display = 'block';
    localStorage.setItem('buttonState', 'active');
  }
});
```

Оба этих способа позволяют сохранять состояние кнопки и блока при обновлении страницы, используя JavaScript и HTML5 Local Storage. Они могут быть адаптированы под вашу конкретную реализацию и стилизацию.

При сохранении состояния кнопки нажатой, сохранить информацию в localStorage. При открытии страницы, прочитать состояние кнопки из localStorage и установить кнопку в нужное состояние.

Можно использовать localStorage или куки для сохранения состояния кнопки.