Здесь есть довольно простое решение, которое заключается в использовании Local storage. Хорошая черта Local storage заключается в том, что вы можете сохранять информацию на жесткий диск пользователей, так что, когда они обновляют страницы со списком запланированных задач, все остается на своих местах.
Что такое Local storage?
Local storage (локальное хранилище) – это часть веб-хранилища, которое является частью спецификации HTML5. В спецификации приводится две опции хранения данных:
* Local storage: позволяет хранить данные без срока истечения, и именно его мы сегодня будем использовать, так как нам нужно, чтобы списки запланированных задач оставались на странице насколько возможно долго.
* Session Storage: сохраняет данные лишь на протяжении отдельной сессии. Так что, если пользователь закроет вкладку, а затем снова откроет, – все данные пропадут.
Проще говоря, все что делает веб-хранилище, это локально сохраняет пары ключ-значение с именами, и в отличие от cookies, эти данные сохраняются даже если вы закрываете браузер или выключаете компьютер.
HTML
Если речь идет о списке запланированных дел, то нам понадобится:
* поле ввода для названия задачи
* кнопка ввода для внесения задачи в список
* кнопка для очистки запланированных задач
* ненумерованный список, в который будут помещаться задачи
* 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>
Здесь у нас довольно простой HTML, в котором мы динамически будем публиковать контент при помощи javascript.
Так как в данном примере мы используем jQuery, вам следует включить эту библиотеку в ваш HTML-документ.
javascript
Так как мы занимаемся разработкой простого приложения для составления списка запланированных задач, здесь первое, о чем нам нужно подумать, это о том, чтобы уловить момент нажатия по кнопке добавления задачи, и о том, чтобы проверить, не пуста ли форма в этот момент:
$('#add').click( function() {
var Description = $('#description').val();
//if the to-do is empty
if($("#description").val() == '') {
$('#alert').html("<strong>Warning!</strong> You left the to-do empty");
$('#alert').fadeIn().delay(1000).fadeOut();
return false;
}
Здесь мы проверяем нажатие по кнопке, и запускаем простой тест на то, заполнил ли пользователь необходимые формы. Если же нет, то появляется div с предупреждением, и держится на виду 1000ms, после чего исчезает. Наконец, мы возвращаем false, и поэтому браузер не считывает остальную часть скрипта, и не добавляет пункт в список.
Следующее, что нам нужно сделать, это внести пункт списка со значением, предоставленным в поле ввода. Это происходит тогда, когда пользователь вводит все нужные данные и нажимает кнопку – каждая новая задача становится в начало списка, и данные сохраняются в local storage следующим образом:
// add the list item
$('#todos').prepend("<li>" + Description + "</li>");
// delete whatever is in the input
$('#form')[0].reset();
var todos = $('#todos').html();
localStorage.setItem('todos', todos);
return false;
});
Как видно, здесь используется довольно стандартный jQuery, и когда дело доходит до local storage, нам нужно сохранить ключ и значение. Ключ – это название, которое мы сами указали, и в данном случае это 'todos'. Далее нам нужно указать, что мы собираемся сохранить, и в данном случае – это весь HTML, который помещен внутрь ненумерованного списка 'todos'. Как видно, мы просто извлекли эти данные при помощи jQuery, и вернули значение false, чтобы наша форма не запустила подтверждение и перезапуск страницы.
Следующий этап заключается в проверке, было ли что-нибудь уже сохранено в local storage на нашем компьютере, и если да, то нам нужно отобразить эти данные на странице. Так что, так как мы задали нашему ключу имя todos, нам нужно проверить его наличие следующим образом:
// if we have something on local storage place that
if(localStorage.getItem('todos')) {
$('#todos').html(localStorage.getItem('todos'));
}
Для проверки мы воспользовались простым выражением if, а затем мы получаем то, что у нас сохранено в local storage, и помещаем эти данные в качестве HTML в ненумерованном списке запланированных задач.
Если вы протестируете наше небольшое приложение, перезагрузив страницу, то увидите, что оно уже работает, и все, что нам осталось сделать, это создать функцию для тех случаев, когда пользователь решает очистить все формы. Когда это происходит, нам нужно очистить все содержимое local storage, и перезагрузить страницу, чтобы изменения вступили в силу, затем мы возвращаем значение false, чтобы предотвратить появление знака # в начале URL.
// clear all the local storage
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});
На этом мы завершаем разработку нашего маленького, но довольно полезного приложения. Полный код выглядит следующим образом:
$('#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, если вы до сих пор имеете дела с этой версией.
Завершение
Local storage в маленьких приложениях может оказаться очень полезным свойством. Что еще нужно для хранения небольшого объема данных?
Как вы сохраняете данные из javascript? Предпочитаете cookies или базы данных? А может быть Local storage? Пожалуйста, расскажите нам в комментариях!