Создание приложения “список дел” (амер. to-do list), обычно, является первым приложением, которое вы делаете при изучении JavaScript, но проблема всех этих приложений является в том, что, когда вы перезагружаете страницу все эти списки исчезают.
Существует простое решение – использование локального хранилища. Преимуществом локального хранилища является то, что вы можете сохранить биты данных на компьютере пользователя, и когда произошла перезагрузка страницы, все списки задач остались на месте.
Что такое локальное хранилище?
Локальное хранение данных является частью сети хранения, которое само по себе является частью спецификации HTML5. Есть два варианта для хранения данных в спецификации:
- Локальное хранилище (Local Storage): хранит данные без даты окончания срока действия, и это тот вариант, который мы будем использовать, потому что мы хотим, чтобы наши списки оставались на странице как можно дольше.
- Хранение сессии (Session Storage): только сохраняет данные в течение одной сессии, так что если пользователь закрывает вкладку и вновь открывает её, все его данные будут потеряны.
Простыми словами, все, что веб хранилище делает, это сохраняет key/value пары с именем локально, и в отличие от cookies, эти данные сохраняются даже если вы закроете браузер или выключите компьютер.
HTML
Если мы думаете о списке дел, то вам понадобится следующие:
- Входная, где можно будет разместить наш список
- Кнопка ввода, чтобы добавить список
- Кнопка, чтобы очистить весь ежедневник
- Контейнер неупорядоченного списка, где наш список будет помещен в список элементов
- И, наконец, нам нужен контейнер DIV, чтобы показать уведомление, когда вы попытаетесь ввести пустую задачу.
Таким образом, наш HTML должен выглядеть примерно так:
|
1
2
3
4
5
6
7
8
9
|
<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
Если мы подумаем о структуре простого “to-do list” приложения, то первое что нам нужно сделать, это проверить, имеет ли ввод пустое значениее, когда пользователь нажимает на кнопку “добавить” или “проверить”:
|
1
2
3
4
5
6
7
8
|
$('#add').click( function() {
var Description = $('#description').val();
//if the to-do is empty
if($("#description").val() == '') {
$('#alert').html("Warning! You left the to-do empty");
$('#alert').fadeIn().delay(1000).fadeOut();
return false;
}
|
Все, что мы сделали, это проверили клик по кнопке Добавить и запустили простой тест, чтобы проверить, если пользователь заполнил ввод чем-то. Если нет, то тогда предупреждение div всплывает и остается на 1000 мс, а затем исчезает.
Следующее, что нам нужно сделать, это вставить элемент списка со значением в cтроку ввода, и мы предварим это так, что, когда пользователь добавляет задачу, она всегда будет идти в начало списка, а затем сохранять элемент списка в локальное хранилище, вот так:
|
1
2
3
4
5
6
7
8
|
// add the list item
$('#todos').prepend("
// delete whatever is in the input
$('#form')[0].reset();
var todos = $('#todos').html();
localStorage.setItem('todos', todos);
return false;
});
|
Как вы видите, это довольно стандартный jQuery и когда дело доходит до локального хранилища мы должны сохранить ключ и значение. Ключ представляет собой имя, которое мы себе задаем, в этом случае мы просто назовем его «Todos”, затем мы должны определить, что мы хотим сохранить, и в данном случае это весь HTML, что находится внутри Todos неупорядоченного списка . Как вы видите, мы все захватили с помощью jQuery, и наконец, вернули “ложные” (false) так, чтобы форма не сдавалась и наша страница не обновлялась.
Наш следующий шаг, это проверить, есть ли у нас что-то сохраненное на локальном хранилище. Если есть, то тогда нам нужно разместить это на странице, учитывая то, что мы дали нашему ключу имя “todos”, нам нужно проверить его существование. Вот так:
|
1
2
3
4
|
// if we have something on local storage place that
if(localStorage.getItem('todos')) {
$('#todos').html(localStorage.getItem('todos'));
}
|
Если вы протестируете наше приложение и перезагрузите страницу, то увидите, что она уже работает. Все, что нам остаеться сделать, это создать функцию, которая будет отвечать за очистку всего списка. Мы стираем все местные хранения, перезагружаем страницу, чтобы наше изменение вступило в силу, а затем возвращаем “false”, чтобы предотвратить хэш перед URL следующим образом:
|
1
2
3
4
5
6
|
// clear all the local storage
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});
|
Полный код выглядит следующим образом:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$('#add').click( function() {
var Description = $('#description').val();
if($("#description").val() == '') {
$('#alert').html("Warning! You left the to-do empty");
$('#alert').fadeIn().delay(1000).fadeOut();
return false;
}
$('#todos').prepend("
$('#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;
});
|
Поддержка браузеров
Поддержка Web Storage довольно хороша для HTML5 спецификаций, он поддерживается всеми основными браузерами и даже IE8.
Как вы храните данные из JavaScript? Вы предпочитаете “печеньки” или базы данных для локального хранилища? Дайте нам знать в своих комментариях.
Ознакомление с CSS модулем Flexbox
2D графика. Талант и многогранность Александра Дягилева
Добавляем свой CSS в любой пост или страницу на Вордпрессе
2D графика. Талант и многогранность Александра Дягилева
Оптимизация JavaScript при помощи RequireJS