Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш Telegram бот: @htmlweb_bot

HTML5 Web Storage

HTML5 Web Storage - Это база данных на стороне клиента, которая позволяет пользователям сохранять данные в виде пары ключ/значение.

HTML5 Web Storage имеет достаточно простой API для извлечения записи данных локального хранилища. Он может хранить до 10 Мб данных для одного домена. В отличие от файлов cookie, Web Storage не делает каждый раз запрос HTTP.

Типы Web Storage

Local storage: Хранит данные без срока годности. Эти данные будут доступны даже после закрытия вкладки браузера.

Session storage: Хранит данные за один сеанс в одной вкладке браузера. Материалы данных будут очищены, как только пользователь закроет вкладку.

setItem(‘key’,’value’) - позволяет записать данные в локальное хранилище
removeItem(‘key’) - удаление одного элемента
clear() - удалить все локальные данные, сохраненные веб-сайтом
length - возвращает общее количество значений в зону хранения

Пример Web Storage

Это простая веб-страница пользователя, которая позволит нам изменить цвета фона страницы и размер шрифта в заголовке.

<form onsubmit="return !setSettings()"><label>Выбрать цвет для фона: </label>
        <input id="favcolor" type="color" value="#ffffff" />
        <label>Select Font Size: </label>
        <input id="fontwt" type="number" max="14" min="10" value="13" />
        <input type="submit" value="Save" />
        <input onclick="clearSettings()" type="reset" value="Стереть" />
</form>
<body onload="applySetting()">
<script>
    function setSettings() {
        if ('localStorage' in window && window['localStorage'] !== null) {
            try {
                var favcolor = document.getElementById('favcolor').value;
                var fontwt = document.getElementById('fontwt').value;
                localStorage.setItem('bgcolor', favcolor);
                localStorage.fontweight = fontwt;
            } catch (e) {
                if (e == QUOTA_EXCEEDED_ERR) {
                    // исключение, если лимит хранилища превышает 5 Мб
                    alert('Quota exceeded!');
                }
            }
        } else {
            alert('Данные не сохранятся, ваш браузер не поддерживает Local storage');
        }
    }

    function applySetting() {
        if (localStorage.length != 0) {
            document.body.style.backgroundColor = localStorage.getItem('bgcolor');
            document.body.style.fontSize = localStorage.fontweight + 'px';
            document.getElementById('favcolor').value = localStorage.bgcolor;
            document.getElementById('fontwt').value = localStorage.fontweight;
        } else {
            document.body.style.backgroundColor = '#FFFFFF';
            document.body.style.fontSize = '14px'
            document.getElementById('favcolor').value = '#FFFFFF';
            document.getElementById('fontwt').value = '14';
        }
    }

    function clearSettings() {
        localStorage.removeItem("bgcolor");
        localStorage.removeItem("fontweight");
        document.body.style.backgroundColor = '#FFFFFF';
        document.body.style.fontSize = '14px'
        document.getElementById('favcolor').value = '#FFFFFF';
        document.getElementById('fontwt').value = '14';
    }
</script>

Функция setSettings, которая вызывается из события формы onsubmit которое позволит нам сохранить выбранные пользователем данные в Local storage (локальное хранилище). Перед тем, как мы используем данные, мы должны проверить, поддерживает браузер HTML5 Web Storage или нет.

Если изменить фон и размер шрифта приложения. Ключ getItem(‘Key’) покажет сохранённые данные. Поэтому некоторое время фон и размер шрифта приложения не изменится.

Приведенные выше функции могут быть вызваны во время onload события тега body следующим образом

Local storage может быть очищено с помощью функций clear() или removeItem(‘key’). В примере ниже, функция вызывает событие click кнопки «очистить».

Для сохренения объектов можно использовать JSON:

// Создаем объект UserInfo
var user = new UserInfo();
// Сохраняем этот объект в формате JSON
sessionStorage.userinfo = JSON.stringify(user);

// Преобразуем JSON-текст в соответствующий объект
user = JSON.parse(sessionStorage.userinfo);

alert("Привет " + user.name + " " + user.family);

События storage

Когда мы установить или удалим данные из веб — хранилища, хранилище запустит событие объекта window. Мы можем добавить обработку события:

window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(e) {
    var message = document.getElementById("updateMessage");
    message.innerHTML = "Обновление локального хранилища: "+ e.storageArea;
    message.innerHTML += "<br>Ключ: " + e.key;
    message.innerHTML += "<br>Старое значение: " + e.oldValue;
    message.innerHTML += "<br>Новое значение: " + e.newValue;
    message.innerHTML += "<br>URL: " + e.url;
}

Событие event имеет следующие атрибуты:

key - свойство, которое изменилось
newValue — новое заданное значение
oldValue — ранее сохраненное значение
url — полный адрес события, где оно произошло
storageArea — объекты localStorage или sessionStorage

Использование localStorage

LocalStorage можно использовать для сохранения состояния игры при закрытии окна браузера для восстановления его после повторного входа.

window.onbeforeunload = function(e) {
    // Проверяем, существует ли объект localStorage (т.к. нет смысла
    // предлагать сохранять состояние, если мы не сможем это сделать)
    if (localStorage){
        // Выводим запрос о сохранении состояния
        if (confirm("Вы хотите текущее положение игры?")) {
            localStorage["Game_current"] = JSON.stringify(Game);
        }
    }
}

При следующей загрузке страницы можно проверить, существует ли эта информация:

// Возможность локального хранилища поддерживается?
if (localStorage && localStorage["Game_current"]) {
    // Преобразуем JSON-текст в соответствующий объект
    user = JSON.parse(localStorage.Game_current);
}