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

localStorage — новая особенность HTML5, позволяющая хранить любую информацию в пользовательском браузере благодаря JavaScript. Это старый добрый JS-объект, в который можно добавлять и удалять пары ключ/значение.

<section class="wa-form">
    <form id="form" action="#" method="POST">
        <div class="wa-field">
            <div class="wa-value">
                <input id="description" name="description" type="text" placeholder="Добавьте задачу несколько раз"/>
            </div>
        </div>
        <div class="wa-field">
            <div class="wa-value align-center">
                <button id="add" type="submit">Добавить запись</button>
                <button id="clear">Очистить список</button>
            </div>
        </div>
    </form>
    <div id="alert"></div>
    <ul id="todos"></ul>
</section>

<script>
$('#add').click( function() {
    var Description = $('#description').val();
    if($("#description").val() == '') {
        $('#alert').html("Внимание! Введите запись в текстовое поле.");
        $('#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;
});
</script>

Демо пример записи и очистки в LocalStorage