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

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

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

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

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

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

HTML

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

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

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

  Clear All

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

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

  JavaScript

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

  $("#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; }

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

  // вставляем запись $("#todos").prepend("

  " + Description + "

  "); // удаляем все что осталось в текстовом поле $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; });

  Для работы с локальным хранилищем необходимо предоставить ключ и соответствующее ему значение. В нашем случае назовем ключ ‘todos’, а значением будет весь HTML код, который содержится в списке (в теге

  ). Этот код легко получить с помощью 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("Warning! You left the to-do empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; } $("#todos").prepend("

  • " + Description + "
  "); $("#form").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 и ниже.

  Заключение

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

  Последнее обновление: 1.11.2015

  Хотя куки позволяют сохранять информацию, они имеют ряд ограничений. Например, браузер имеет ограничения на размер куков - каждая кука не может превышать 4 кб. Куки имеют срок действия, после которого удаляются. Куки являются неотъемлемой чертой протокола HTTP и при каждом запросе к серверу передаются вместе с запросом на сервер. Однако для работы с куками на стороне клиента в коде javascript не имеет значения передача куков на сервер. Кроме того, для извлечения сохраненных куков надо написать некоторую порцию кода.

  Поэтому в HTML5 была внедрена новая концепция для хранения данных - web storage . Web storage состоит из двух компонентов: session storage и local storage .

  Session storage представляет временное хранилище информации, которая удаляется после закрытия браузера.

  Local storage представляет хранилище для данных на постоянной основе. Данные из local storage автоматически не удаляются и не имеют срока действия. Эти данные не передаются на сервер в запросе HTTP. Кроме того, объем local storage составляет в Chrome и Firefox 5 Mб для домена, а в IE - 10 Mб.

  Все данные в web storage представляют набор пар ключ-значение. То есть каждый объект имеет уникальное имя-ключ и определенное значение.

  Для работы с local storage в javascript используется объект localStorage , а для работы с session storage - объект sessionStorage .

  Для сохранения данных надо передать в метод setItem() объекта localStorage:

  LocalStorage.setItem("login", "[email protected]");

  В этот метод передаются два значения: ключ и значение сохраняемого объекта.

  Если в localStorage уже есть объект с ключом "login", то его значение заменяется новым.

  Для получения сохраненных данных надо вызвать метод getItem() :

  Var login = localStorage.getItem("login"); //[email protected]

  В этот метод передается ключ объекта.

  Чтобы удалить объект, применяется метод removeItem() , который принимает ключ удаляемого объекта:

  LocalStorage.removeItem("login");

  И для полного удаления всех объектов из localStorage можно использовать метод clear() :

  LocalStorage.clear();

  С сохранением простых объектов все просто, однако при этом надо учитывать, что данные в localStorage сохраняются в виде строки:

  LocalStorage.setItem("age", 23); var age = localStorage.getItem("age"); age=parseInt(age)+10; document.write(age); //33

  Если в данном случае не преобразовать значение к числу с помощью parseInt() , то age будет действовать как строка.

  Трудности могут возникнуть с сохранением сложных объектов:

  Var user ={ name: "Tom", age: 23, married: false }; localStorage.setItem("user", user); var savedUser = localStorage.getItem("user"); document.write(savedUser); // document.write(savedUser.name); // undefined - savedUser - строка, а не объект

  В этом случае нам надо использовать сериализацию в формат JSON:

  Var user ={ name: "Tom", age: 23, married: false }; localStorage.setItem("user", JSON.stringify(user)); var savedUser = JSON.parse(localStorage.getItem("user")); document.write(savedUser.name + " " + savedUser.age +" " + savedUser.married); // Tom 23 false

  Привет всем! В этой статье мы разберем, что такое localStorage и как его использовать .

  Введение

  LocalStorage - локальное хранилище. Т.е. это специально отведенное место в браузере(что-то вроде небольшой базы данных), где мы можем записывать, читать и удалять какие-то данные. На самом деле, локальное хранилище очень похоже на COOKIE , но есть отличия. Вот давайте о них и поговорим. Cookie очень ограничены. В одной cookie может быть всего 4096 символов, а их количество на один домен примерно 30-50 в зависимости от браузера. В локальном хранилище мы можем хранить 5-10мб или даже больше на длительное время.

  Где их использовать

  Самое большое отличие cookie от localStorage - это то, что первый работает с сервером, а второй нет, хотя это тоже можно сделать, но об этом немного позже. Используйте локальное хранилище там, где вам не нужна тесная работа с сервером, а нужно хранить какие-то временные данные. К примеру, представим, что вы создаете какое-то web-приложение, куда человек может зайти, ввести несколько задач, которые он хочет сделать за день и удалить те, которые уже выполнил. Зачем нам тут сервер? Правильно, не за чем. Вот тут и стоит использовать localStorage . Человек заходит, вводит задачи, они записываются в специальное место его браузера и там хранятся. Когда человек зайдет снова через какое-то время, они будут оттуда выбраны и показаны. К примеру, кликнув по задаче, она будет удаляться с локального хранилища и, следовательно, показываться ему уже не будет. Перейдем к тому, как его использовать.

  Как использовать localStorage

  Хранятся данные также, как и в cookie - ключ:значение . Чтобы добавить новое значение, напишите так:

  LocalStorage.setItem("ключ", "значение");

  Мы используем объект localStorage и его метод setItem , куда передаем ключ и значение.

  Чтобы получить данные, пишем следующее:

  Var value = localStorage.getItem("ключ");

  В результате, в переменную value попадет значение, которое хранится под ключом, который мы передаем в метод getItem .

  Удаляем данные

  LocalStorage("ключ"); // удалит данные под переданным ключом
  localStorage.clear(); // полностью очистит локальное хранилище

  Чтобы проверить, не переполнено ли локальное хранилище, вы можете использовать константу QUOTA_EXCEEDED_ERR

  Try {
  localStorage.setItem("ключ", "значение");
  } catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
  alert("Превышен лимит");
  }
  }

  Вот и все, что следует знать про localStorage . Стоит сказать, что помимо этого объекта есть еще один - sessionStorage . Отличается он только тем, что хранит данные только для одной вкладки, и они будут удалены, как только пользователь закроет вкладку.

  В начале статьи я говорил, что локальное хранилище создано для того, чтобы хранить локальные данные и не общаться с сервером, но, однако, такая возможность у нас все же есть. Думаю, некоторые уже могли догадаться, как это сделать. Итак, если вам нужно отправить какие-то данные на сервер, то сделайте следующее: получите данные из локального хранилища, преобразуйте их в JSON строку и отправьте с помощью технологии Ajax . Так же можно их и принимать от сервера.

  Итог

  Итак, используйте localStorage там, где вам не нужно общаться с сервером, а нужно хранить данные локально, в браузере у пользователя. Все, что вам для этого нужно, мы рассмотрели в этой статье. Спасибо за внимание и до скорого!

  Перевод статьи: How to use local storage for JavaScript.
  Sara Vieira.

  Знакомство с основами программирования языка JavaScript зачастую начинается с создания простейших приложений, таких, к примеру, как электронная записная книжка, используемая нами для записи дел и событий, о которых мы можем забыть. Но подобным приложениям свойственна одна проблема — после перезагрузки страницы, список всех оставленных ранее записей исчезает, то есть приложение возвращается в свое исходное состояние.

  Существует очень простой выход из данной ситуации, предусматривающий использование механизма локального хранения localStorage . Благодаря тому, что localStorage позволяет нам сохранять необходимые данные на пользовательском компьютере, упомянутый выше список запланированных дел и событий будет все еще доступен после перезагрузки страницы, кроме того, localStorage является на удивление очень простым способом хранения данных и доступа к ним при необходимости.

  Что такое localStorage?

  Это механизм локального хранения данных, который является частью технологии Web Storage , предусмотренной HTML5 спецификацией. Имеется два варианта хранения данных, допустимые данной спецификацией:

  • Локальное хранение: позволяет сохранять информацию без ограничений по срокам хранения. Именно этот вариант мы и будем использовать, поскольку имеющийся в нашем примере список задач должен храниться постоянно.
  • Использование сеансов: обеспечивает сохранность данных лишь на период одного сеанса, то есть после закрытия пользователем вкладки нашего приложения и повторного ее открытия вся необходимая для дальнейшей работы приложения информация будет удалена.

  Попросту говоря, все, что делает Web Storage , это хранит данные в форме именованный ключ/значение локально и в отличие от двух других методов, каждый из которых имеет свои недостатки (Сеансовое хранение информации предусматривает использование для этого серверной стороны, к тому же после закрытия сеанса пользователя эта информация удаляется, а cookies хотя и используют для хранения сторону клиента, но не надежны потому, что путем настроек браузера пользователь может отменить их поддержку.) сохраняет данные даже в том случае, если вы закрыли браузер или выключили свой компьютер. (*Я позволил себе несколько изменить и дополнить содержание этого абзаца, поскольку считаю, что в оригинале автор допустил неточности. )

  HTML

  Если придерживаться нашего примера, в котором мы хотим создать электронный вариант записной книжки, то ниже представлены все необходимые компоненты для ее реализации:

  • Поле для ввода новых записей (событий, дел и т.п.).
  • Кнопка для подтверждения введенной записи.
  • Кнопка для очистки уже созданного списка дел.
  • Неупорядоченный список, который будет пополняться элементами в виде новых записей.
  • И в заключение, нам нужен блок div в качестве контейнера, содержащего выводимые для пользователя сообщения, такие, допустим, как предупреждение о том, что он забыл ввести значение следующей записи, оставив поле ввода пустым.

  В результате наша разметка должна иметь примерно такой вид:

  
  

  
  
  
  Очистить список
  

  
  

  
  

  Это вполне стандартный HTML шаблон, который мы можем заполнить динамически формируемым контентом с помощью JavaScript .

  JavaScript

  Применительно к структуре взятого в нашем примере простейшего приложения блокнота, первое, что нам необходимо сделать, это обеспечить отслеживание события нажатия кнопки «Добавить запись» и проверять, введена ли в текстовое поле для записи какая-нибудь информация, то есть в момент нажатия кнопки оно должно быть не пустым. Что-то на пример вот этого:

  $("#add").click(function() {
  //если текстовое поле не заполнено
  $("#alert").html("Внимание! Введите запись в текстовое
  поле.");
  return false;
  }

  Вот что мы делаем с помощью этого фрагмента кода. При нажатии кнопки «Добавить запись» мы проверяем, ввел ли пользователь что-нибудь в поле для новой записи. Если он этого не сделал, то появляется предусмотренный нами для вывода сообщений div , информируя пользователя о том, что поле ввода записи не заполнено и затем, по истечении 1000ms (1 секунда) элемент div , а соответственно и сообщение, исчезает. Далее функция возвращает значение false , после чего браузер прекращает выполнение остальной части скрипта и приложение снова готово к вводу новой записи.

  Следующим нашим шагом будет добавление в начало списка введенного в поле для записей значения путем генерации нового элемента списка. Таким образом, когда пользователь дописывает еще одну запись, то она всегда будет помещаться в начало списка намеченных дел и ожидаемых событий. После этого нам остается лишь сохранить список с помощью механизма localStorage :

  // Добавляем запись в существующий список
  $("#todos").prepend("

  " + Description + "

  ");
  // Очищаем поле ввода
  $("#form").reset();
  
  return false;
  });

  Как вы, возможно, заметили, здесь нет ничего необычного, используется стандартный вариант jQuery кода. В месте обращения к объекту localStorage мы должны указать сохраняемые нами данные в форме ключ/значение . Для ключа можно использовать произвольное имя, и я назвал его "todos" , далее нужно указать то, что нам, собственно, необходимо сохранить в памяти. В данном случае это полный фрагмент HTML разметки, включаемый в неупорядоченный список (находящийся между тегами ), с помощью которого отображаются все введенные пользователем ранее записи. Из кода видно, что мы просто извлекаем необходимый нам фрагмент с помощью jQuery метода .html() и в конце, выполнив все необходимые действия, устанавливаем возвратное значение функции в false , что предотвращает отправку данных формы и, следовательно, перезагрузку нашей страницы.

  Теперь, допустим, наш пользователь ранее уже внес несколько записей и для дальнейшей нормальной работы приложения нам нужно проверить имеется ли в localStorage сохраненная прежде на компьютере информация и если да, то отобразить ее для пользователя. Поскольку имя нашего ключа "todos" , то мы должны проверить его существование следующим образом:

  // если в локальном хранилище уже есть данные, то отображаем их
  
  }

  Для проверки наличия данных мы использовали обычный if оператор и при выполнении указанного нами условия, просто извлекли из локального хранилища все данные, поместив их в качестве HTML разметки внутри неупорядоченного списка, с помощью которого отображаются введенные ранее пользователем записи.

  Если вы проверите работу своего простейшего приложения, то обнаружите, что после перезагрузки страницы все остается на месте. И теперь, последнее, что нам остается сделать, так это создать функцию, с помощью которой пользователь при необходимости смог бы удалить все свои записи. Это реализуется путем очистки localStorage и перезагрузки страницы для активации сделанных изменений. Далее, мы, как и в предыдущем случае устанавливаем false в качестве возвратного значения функции, что предотвращает появление хэша в URL . (*и не прокручивает страницу вверх. ):

  // Полная очиска localStorage
  window.localStorage.clear();
  location.reload();
  return false;
  });

  В результате имеем полностью функционирующее приложение. И собирая все приведенные выше фрагменты воедино, получаем полный код приложения:

  $("#add").click(function() {
  var Description = $("#description").val();
  if($("#description").val() == "") {
  $("#alert").html("Внимание! Введите запись в
  текстовое поле.");
  $("#alert").fadeIn().delay(1000).fadeOut();
  return false;
  }
  $("#todos").prepend("

  "
  + Description + "

  ");
  $("#form").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;
  });

  Поддержка браузеров.

  В HTML5 спецификации предусмотрена достаточно мощная поддержка технологии Web Storage , благодаря чему она также реализована большинством популярных браузеров, даже IE8 . Единственной проблемой остается IE7 , если вас это все еще интересует.

  Заключение.

  В таких небольших приложениях механизм localStorage может вполне успешно заменить использование баз данных. Для хранения небольших объемов данных совсем не обязательно использовать более сложные альтернативы.

  * Примечание переводчика.

  Post Views: 475

  Из таких web приложений, как Google Wave, Gmail и т.п. мы видим, что кеширование данных на стороне клиента это хорошая идея для большинства веб-приложений. Подумайте сами, для мобильного интернета очень важен объем . Однотипные запросы в 70% случаях (я не делал никаких расчетов, просто выражать доводы в процентах гораздо солиднее) возвращают одни и те же данные. Кроме того кешировать можно не только данные, но и само приложение.

  До сих пор наиболее популярным методом для локального хранения были cookie. Cookie - это пара ключ-значение, которые хранятся локально в текстовом файле (4KB или 20 пар ключ-значение максимум(IE) для одного домена). Кроме того cookie передаются на сервер при любом HTTP запросе на сервер, даже при AJAX. Закономерно, что в стандарте должны были появится средства для более практичного хранения данных в браузере.

  Из всей спецификации HTML5 , локальные хранилища данных на стороне клиента, вероятно, одна из самых обсуждаемых тем. Есть как положительные, так и отрицательные мнения. Из минусов, самый весомый это нарушение концепции актуальности данных для всех пользователей, т.е. так, как это работает сейчас: пользователь заходит на сайт и видит последнюю версию веб-приложения, ту которую видят и все остальные пользователи. Однако при верном применении локальных хранилищ и своевременного обновления данных, этих проблем можно избежать.

  Итак, хранилище на стороне клиента делится на 3 принципиальных методологии:

  1. Session storage.
  2. Local storage или Global Storage

  Давайте подробнее рассмотрим каждую из них:

  1. Session Storage - сессионное хранилище

  Сессионное хранилище более удобно, чем cookie. С различными реализациями макс. лимит может быть порядка нескольких Мбит. В отличии от cookie сессионные данные не отправляются при каждом запросе.
  Преимущества: при запросе полезная нагрузка минимальна.
  Приведем пример сессионного хранилища:

  SessionStorage.setItem("userName", "taranfx"); // определяем сессионную переменную alert("Вас зовут: " + sessionStorage.getItem("userName"));// проверка доступа alert("Привет " + sessionStorage.userName); // другой метод доступа к сессионной переменной sessionStorage.removeItem("userName"); // в конце удаляем переменную

  2. Local Storage - локальное хранилище
  

  LocalStorage JavaScript объект функционально идентичен sessionStorage объекту. Они отличаются только продолжительностью жизни и областью видимости. Область видимости: данные в localStorage доступны через все окна браузера в то время, как sessionStorage данные ограничивается окном в котором были созданы.
  Глобальное хранилище памяти задается браузером, веб-сайты могут использовать его для хранения постоянных данных, которые не должны быть отправлены на сервер. Данные доступны по JavaScript и Flash. Это может быть очень удобно для Flash-игр.

  GlobalStorage[""].foo = "bar"; // foo будет доступен на любом веб-сайте globalStorage["ru"].foo1 = "bar1"; // foo1 будут доступны на сайтах "..foo2 = "bar2"; // foo2 будет доступен только на сайт

  При локальном хранении данных, спецификация была переписана в более безопасную сторону. Т.е. теперь данные автоматически привязываются к домену.
  Продолжительность действия: при хранении в Local Storage данные сохраняются даже после закрытия вкладки/окна/браузера.

  Вот как это можно сделать:

  LocalStorage.setItem("userName", "taranfx"); // определяем переменную в localStorage alert("Вас зовут: " + localStorage.getItem("userName")); // доступ к ней alert("Привет " + localStorage.userName); // доступ к ней по другому localStorage.removeItem("userName"); // в конце удаляем ее

  3. Database Storage - хранение в базе данных

  До сих пор мы обсуждали хранилища ограниченные парами ключ-значение. Но когда вы имеете дело с большими объемами данных, лучше базы данных еще ничего не придумали. Браузеры использует SQLite базы, которая работает без дополнительных процессов и серверов. Лишь с небольшими ограничениями, к примеру отсутствие внешнего ключа.

  Но в награду вы получаете полноценную SQL базу данных. И работа с ней ведется на SQL.