Чтобы сохранить состояние между перезагрузками в JavaScript, вы можете использовать различные методы. Вот несколько часто используемых подходов:

1. Локальное хранилище: API локального хранилища позволяет хранить пары ключ-значение в хранилище браузера. Вы можете использовать объект localStorageдля сохранения и получения данных. Эти данные сохранятся, даже если пользователь закроет браузер и откроет его снова. Однако обратите внимание, что данные, хранящиеся в локальном хранилище, относятся к конкретному домену и не будут доступны из разных доменов.

Пример использования:

// Save data to local storage
localStorage.setItem('key', 'value');
// Retrieve data from local storage
const value = localStorage.getItem('key');
// Remove data from local storage
localStorage.removeItem('key');

2. Хранилище сеансов. Подобно локальному хранилищу, API хранилища сеансов позволяет хранить данные, которые будут сохраняться в течение сеанса просмотра. Данные, хранящиеся в хранилище сеансов, будут доступны до тех пор, пока вкладка или окно браузера остаются открытыми. После закрытия вкладки или окна данные удаляются.

Пример использования:

// Save data to session storage
sessionStorage.setItem('key', 'value');
// Retrieve data from session storage
const value = sessionStorage.getItem('key');
// Remove data from session storage
sessionStorage.removeItem('key');

3. Файлы cookie. Файлы cookie — это небольшие фрагменты данных, которые могут храниться на устройстве пользователя. Они обычно используются для управления сеансами, а также могут использоваться для сохранения состояния. У файлов cookie есть срок действия, и вы можете установить срок действия на будущую дату, чтобы данные сохранялись.

Пример использования:

// Set a cookie
document.cookie = 'key=value; expires=Fri, 31 Dec 2024 23:59:59 GMT';
// Read a cookie
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim().split('=');
    if (cookie[0] === 'key') {
        const value = cookie[1];
        // Do something with the value
        break;
    }
}
// Delete a cookie
document.cookie = 'key=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

4. Параметры URL-адреса. Вы можете передавать данные между перезагрузками страницы, используя параметры URL-адреса. Вы можете получить значения из URL-адреса с помощью API URLSearchParamsили путем анализа строки window.location.search.

Пример использования:

// Set URL parameter
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('key', 'value');
// Retrieve URL parameter
const value = urlParams.get('key');

5. IndexedDB: IndexedDB — это низкоуровневый API для клиентского хранилища в веб-браузерах. Он обеспечивает более мощный и гибкий способ хранения данных, чем локальное хранилище или файлы cookie. IndexedDB позволяет хранить структурированные данные и выполнять сложные запросы.

Пример использования:

// Open a database
const request = window.indexedDB.open('myDatabase', 1);
// Create object store and save data
request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction('myObjectStore', 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    objectStore.put('value', 'key');
};
// Retrieve data from object store
request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction('myObjectStore', 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get('key');
    request.onsuccess = function(event) {
        const value = event.target.result;
    };
};
// Remove data from object store
request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction('myObjectStore', 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    objectStore.delete('key');
};

Это некоторые из распространенных методов сохранения состояния между перезагрузками в JavaScript. У каждого метода есть свои преимущества и варианты использования, поэтому выберите тот, который лучше всего соответствует вашим требованиям.