—»     —»   Как использовать Local storage для Javascript?
  Раздел: Java-Скрипты   Комментариев: 4  

Как использовать Local storage для Javascript?

Создание собственного приложения для составления списков запланированных дел – это, пожалуй, одно из первых приложений, с которым сталкиваются разработчики, начиная изучать javascript. И проблема подобных приложений заключается в том, что когда вы обновляете страницу, все списки пропадают.

Здесь есть довольно простое решение, которое заключается в использовании 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? Пожалуйста, расскажите нам в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript
Опубликовал Design FactoRy   Прочитано (раз): 18396   |   Оставлено комментариев: 4
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 16 мая 2013 @ 23:37
Написал: mihdan — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я использую Sisyphus - https://github.com/mihdan/sisyphus
Комментарий #2: 17 мая 2013 @ 10:07
Написал: Dimka Klusevich — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
mihdan,
Я думаю, подключать плагин с избытком кода, для небольших задач не зачем wink
Комментарий #3: 17 мая 2013 @ 11:00
Написал: mihdan — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Dimka Klusevich, ну ТС просил указать, кто и чем пользуется )
Комментарий #4: 21 сентября 2015 @ 14:04
Написал: Kamish — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
>>>
Проще говоря, все что делает веб-хранилище, это локально сохраняет пары ключ-значение с именами, и в отличие от cookies, эти данные сохраняются даже если вы закрываете браузер или выключаете компьютер.
>>>

Но cookies можно установить время жизни, на любой срок, а только если его не указать , то она уничтожиться по истечению сессии.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031