Веб хранилище API HTML

Сложность: Продвинутый

LocalStorage и SessionStorage в HTML

Хранение данных на стороне клиента.

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

<div>
    <input type="text" id="username" placeholder="Введите имя">
    <button onclick="saveData()">Сохранить</button>
    <button onclick="loadData()">Загрузить</button>
    <button onclick="clearData()">Очистить</button>
</div>
<div id="display"></div>

<script>
// Сохранение данных
function saveData() {
    const username = document.getElementById("username").value;
    localStorage.setItem("username", username);
    sessionStorage.setItem("sessionData", "Сессионные данные");
    alert("Данные сохранены!");
}

// Загрузка данных
function loadData() {
    const username = localStorage.getItem("username");
    const sessionData = sessionStorage.getItem("sessionData");
    
    document.getElementById("display").innerHTML = 
        `LocalStorage: ${username || "нет данных"}<br>` +
        `SessionStorage: ${sessionData || "нет данных"}`;
}

// Очистка данных
function clearData() {
    localStorage.removeItem("username");
    sessionStorage.clear();
    document.getElementById("display").innerHTML = "Данные очищены!";
}

// Автозагрузка при загрузке страницы
window.onload = loadData;
</script>