Использование локального хранилища в JavaScript

Очень часто первым приложением на JavaScript бывает Todo-список, но проблема подобных приложений в том, что после обновления страницы все пункты списка пропадают.

Простое решение этой проблемы — использование локально хранилища (Local Storage). Локальное хранилище позволяет хранить данные на машине пользователя и вы легко сможете загрузить список из него после обновления страницы. В этой статье мы напишем небольшой todo-list с использованием локального хранилища.

Что такое локальное хранилище?

Локальное хранилище («веб-хранилище») изначально было частью спецификации HTML5, но сейчас вынесено в отдельную. Хранить данные можно двумя способами:

• Local Storage: постоянное хранилище, именно его мы будем использовать.
• Session Storage: хранит данные только данной сессии, если пользователь закроет страницу, данные будут потеряны.

Локальное хранилище позволяет хранить на компьютере пользователя данные в виде пар ключ-значение и эти данные будут доступны даже после закрытия браузера или выключения компьютера.

HTML

Для создания todo-списка нам понадобится:

• Текстовый input для ввода содержимого элемента.
• Кнопка добавления элемента в список.
• Кнопка для очистки списка.
• Сам список (<ul>).
• И дополнительный div для показа ошибок.

Таким образом HTML разметка будет выглядеть так:

<section>
    <form id="form" action="#" method="POST">
        <input id="description" name="description" type="text" />
        <input id="add" type="submit" value="Add" />
        <button id="clear">Clear All</button>
    </form>
    <div id="alert"></div>
    <ul id="todos"></ul>
</section>

Довольно простая структура, которую мы оживим с помощью JavaScript.

Т.к. мы используем jQuery необходимо дополнительно подключить её.

JavaScript

Для начала нам необходимо отслеживать нажатие на кнопку добавления и проверять чтобы поле для ввода не было пустым:

$('#add').click( function() {
    var Description = $('#description').val();

    if($("#description").val() == '') {
        $('#alert').html("<strong>Warning!</strong> You left the to-do empty");
        $('#alert').fadeIn().delay(1000).fadeOut();
        return false;
    }

Этот код проверяет значение текстового input’а и, если оно пусто — показывает ошибку и возвращает false, чтобы оставшаяся часть кода не выполнилась и элемент не добавился в список.

Далее нам надо добавить дело в список. Мы будем использовать метод prepend, т.о. элементы будут добавляться в начало списка. Затем весь список сохраняется в локальном хранилище:

    // вставляем запись
    $('#todos').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>");
    // удаляем все что осталось в текстовом поле
    $('#form')[0].reset();
    var todos = $('#todos').html();
    localStorage.setItem('todos', todos);
    return false;
});

Для работы с локальным хранилищем необходимо предоставить ключ и соответствующее ему значение. В нашем случае назовем ключ ‘todos’, а значением будет весь HTML код, который содержится в списке (в теге <ul>). Этот код легко получить с помощью jQuery. И, наконец мы возвращаем false, чтобы предотвратить сабмит формы и не перезагружать страницу.

Следующий шаг — проверить локальное хранилище, если существует значение с ключом ‘todos’, то загрузить список из локального хранилища:

if (localStorage.getItem('todos')) {
    $('#todos').html(localStorage.getItem('todos'));
}

Т.к. мы храним готовый HTML в хранилище, то мы просто вставляем этот код в список.

Наш todo-list почти готов, осталось только реализовать функцию очистки списка. Когда пользователь нажмет на кнопку будет удален весь список и локальное хранилище будет очищено:

$('#clear').click(function() {
    window.localStorage.clear();
    location.reload();
    return false;
});

Готово! Полный код выглядит так:

$(document).ready(function() {
    $('#add').click(function() {
        var Description = $('#description').val();

        if ($("#description").val() == '') {
            $('#alert').html("<strong>Warning!</strong> You left the to-do empty");
            $('#alert').fadeIn().delay(1000).fadeOut();
            return false;
        }

        $('#todos').prepend("<li><input id='check' name='check' type='checkbox'/>" + Description + "</li>");
        $('#form')[0].reset();
        var todos = $('#todos').html();
        localStorage.setItem('todos', todos);
        return false;
    });

    if (localStorage.getItem('todos')) {
        $('#todos').html(localStorage.getItem('todos'));
    }

    $('#clear').click(function() {
        window.localStorage.clear();
        location.reload();
        return false;
    });
});

Поддержка браузерами

Веб хранилище поддерживают все основные браузеры, даже IE8. Опасаться стоит только IE7 и ниже.

Заключение

Локальное хранилище в таких маленьких приложениях может стать отличной заменой базе данных. Хранение маленьких объемов информации не должно вызывать сложностей.