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

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

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

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

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

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

HTML

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

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

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

    Довольно простая структура, которую мы оживим с помощью 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 и ниже.

      Заключение

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

      Создание приложения “список дел” (амер. to-do list), обычно, является первым приложением, которое вы делаете при изучении JavaScript, но проблема всех этих приложений является в том, что, когда вы перезагружаете страницу все эти списки исчезают.
      Существует простое решение - использование локального хранилища. Преимуществом локального хранилища является то, что вы можете сохранить биты данных на компьютере пользователя, и когда произошла перезагрузка страницы, все списки задач остались на месте.

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

      Локальное хранение данных является частью сети хранения, которое само по себе является частью спецификации HTML5. Есть два варианта для хранения данных в спецификации:

      • Локальное хранилище (Local Storage): хранит данные без даты окончания срока действия, и это тот вариант, который мы будем использовать, потому что мы хотим, чтобы наши списки оставались на странице как можно дольше.
      • Хранение сессии (Session Storage): только сохраняет данные в течение одной сессии, так что если пользователь закрывает вкладку и вновь открывает её, все его данные будут потеряны.

      Простыми словами, все, что веб хранилище делает, это сохраняет key/value пары с именем локально, и в отличие от cookies, эти данные сохраняются даже если вы закроете браузер или выключите компьютер.

      Если мы думаете о списке дел, то вам понадобится следующие:

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

      Таким образом, наш HTML должен выглядеть примерно так:

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

      Так как мы будем использовать JQuery в этом примере, вы также должны включить его в HTML документ.

      JavaScript

      Если мы подумаем о структуре простого “to-do list” приложения, то первое что нам нужно сделать, это проверить, имеет ли ввод пустое значениее, когда пользователь нажимает на кнопку “добавить” или “проверить”:

      $("#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троку ввода, и мы предварим это так, что, когда пользователь добавляет задачу, она всегда будет идти в начало списка, а затем сохранять элемент списка в локальное хранилище, вот так:

      // add the list item $("#todos").prepend("

    • " + Description + "
      • "); // delete whatever is in the input $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; });

      Как вы видите, это довольно стандартный jQuery и когда дело доходит до локального хранилища мы должны сохранить ключ и значение. Ключ представляет собой имя, которое мы себе задаем, в этом случае мы просто назовем его «Todos”, затем мы должны определить, что мы хотим сохранить, и в данном случае это весь HTML, что находится внутри Todos неупорядоченного списка. Как вы видите, мы все захватили с помощью jQuery, и наконец, вернули “ложные” (false) так, чтобы форма не сдавалась и наша страница не обновлялась.

      Наш следующий шаг, это проверить, есть ли у нас что-то сохраненное на локальном хранилище. Если есть, то тогда нам нужно разместить это на странице, учитывая то, что мы дали нашему ключу имя “todos”, нам нужно проверить его существование. Вот так:

      // if we have something on local storage place that if(localStorage.getItem("todos")) { $("#todos").html(localStorage.getItem("todos")); }

      Если вы протестируете наше приложение и перезагрузите страницу, то увидите, что она уже работает. Все, что нам остаеться сделать, это создать функцию, которая будет отвечать за очистку всего списка. Мы стираем все местные хранения, перезагружаем страницу, чтобы наше изменение вступило в силу, а затем возвращаем “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("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; });

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

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

      Перевод: Влад Мержевич

      Постоянное локальное хранилище это одна из областей, где клиентские приложения имеют преимущества перед серверными. Для приложений, таких как операционная система, обеспечивается уровень абстракции для хранения и извлечения данных вроде настроек или статуса выполнения. Эти значения могут быть сохранены в реестре, INI-файлах, XML-файлах или в другом месте в зависимости от принципов платформы. Если ваше клиентское приложение нуждается в локальном хранилище больше чем просто пара ключ/значение, вы можете вставить свою собственную базу данных, придумать свой формат файлов или любое количество других решений.

      Исторически, у веб-приложений не было ни одной из этих роскошей. Кукисы были изобретены в начале истории Интернета и они могут быть использованы для постоянного локального хранения небольших объемов данных. Но у них есть три потенциальных минуса:

      • кукисы включаются в каждый HTTP-запрос, замедляя тем самым ваше веб-приложение на напрасную передачу одних и тех же данных снова и снова;
      • кукисы включаются в каждый HTTP-запрос при передаче данных через Интернет в незашифрованном виде (даже если все веб-приложение передается через SSL);
      • кукисы ограничены объемом данных примерно 4 Кб - достаточно, чтобы замедлить ваше приложение (см. выше), но не достаточно, чтобы быть полезным.

      Вот что мы действительно хотим:

      • много места для хранения;
      • работа на стороне клиента;
      • учитывать обновление страницы;
      • нет отправки на сервер.

      Перед HTML5 все попытки добиться этого в конечном итоге были по-разному провальными.

      Краткая история локального хранилища до HTML5

      Вначале был только один Internet Explorer. По крайней мере, Майкрософт хотел, чтобы мир так думал. С этой целью в рамках Первой Великой Войны браузеров Майкрософт изобрел очень много вещей и включил их в свой браузер-который-завершил-войну - Internet Explorer. Одна из этих вещей была названа DHTML Behaviors , а одна из форм поведения называется userData .

      UserData позволяет веб-странице хранить до 64 Кб данных на каждый домен в иерархической XML-подобной структуре. Доверенные домены, такие как интранет-сайты могут хранить в десять раз больше. И эй, 640 Кб должно быть достаточно для всех. IE не представил какой-либо способ изменить эти соглашения, поэтому нет способа увеличить объем доступной памяти.

      В 2002 году компания Adobe представила функцию во Flash 6, которая получилась неудачной и с названием, вводящим в заблуждение - «Flash-кукисы». В среде Flash эта возможность известна более правильно как Local Shared Objects (локальные доступные объекты, LSO). Вкратце, она позволяет Flash-объектам хранить до 100 Кб данных на каждый домен. Брэд Нойберг разработавший ранний прототип моста между Flash и JavaScript назвал ее AMASS (AJAX Massive Storage System), но она была ограничена некоторыми причудами Flash-дизайна. К 2006 году с появлением ExternalInterface во Flash 8 доступ к LSO через JavaScript стал на порядок проще и быстрее. Брэд переписал AMASS и интегрировал ее в популярный Dojo Toolkit под псевдонимом dojox.storage . Flash «бесплатно» дает каждому домену 100 кб для хранения. Кроме того, он предлагает пользователю при запросе увеличивать объем хранения на порядок (1 Мб, 10 Мб и т.д.).

      if (Modernizr.localstorage) {
      // window.localStorage is available!
      } else {
      // нет встроенной поддержки HTML5-хранилища
      }

      Использование HTML5-хранилища

      HTML5-хранилище базируется на именах пар ключ/значение. Вы сохраняете информацию, основываясь на имени ключа, а затем можете получить эти данные с тем же ключом. Имя ключа это строка. Данные могут быть любого типа, который поддерживает JavaScript, включая строки, логические, целые числа или числа с плавающей запятой. Однако в действительности данные хранятся в виде строки. Если вы сохраняете и извлекаете не строки, то надо будет использовать такие функции как parseInt() или parseFloat() , чтобы перевести полученные данные в корректные типы JavaScript.

      Интерфейс хранилища {
      Получить через getItem(ключ);
      Установить через setItem(ключ, данные);
      };

      Вызов setItem() с существующим именем ключа молча перепишет предыдущее значение. Вызов getItem() с несуществующим ключом вернет NULL, а не вызовет исключение.

      Подобно другим объектам JavaScript вы можете обращаться к объекту localStorage как к ассоциативному массиву. Вместо использования методов getItem() и setItem() , вы можете просто указать квадратные скобки. Например, этот фрагмент кода

      var foo = localStorage.getItem("bar");
      // ...
      localStorage.setItem("bar", foo);

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

      var foo = localStorage["bar"];
      // ...
      localStorage["bar"] = foo;

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

      Интерфейс хранилища {
      Удалить через removeItem(ключ);
      clear();
      }

      Вызов removeItem() с несуществующим ключом ничего не вернет.

      Наконец, есть свойство для получения общего количества значений в области хранения и для перебора всех ключей по индексу (получает имя каждого ключа).

      Интерфейс хранилища {
      length
      Получить key(целое неотрицательное число);
      }

      Если при вызове key() индекс лежит не в диапазоне от 0 до (length-1), то функция вернет null .

      Слежение за областью HTML5-хранилища

      Если вы хотите программно отслеживать изменения хранилища, то должны отлавливать событие storage . Это событие возникает в объекте window , когда setItem() , removeItem() или clear() вызываются и что-то изменяют. Например, если вы установили существующее значение или вызвали clear() когда нет ключей, то событие не сработает, потому что область хранения на самом деле не изменилась.

      Событие storage поддерживается везде, где работает объект localStorage , включая Internet Explorer 8. IE 8 не поддерживает стандарт W3C addEventListener (хотя он, наконец-то, будет добавлен в IE 9), поэтому, чтобы отловить событие storage нужно проверить, какой механизм событий поддерживает браузер (если вы уже проделывали это раньше с другими событиями, то можете пропустить этот раздел до конца). Перехват события storage работает так же, как и перехват других событий. Если вы предпочитаете использовать jQuery или какую-либо другую библиотеку JavaScript для регистрации обработчиков событий, то можете проделать это и со storage тоже.

      if (window.addEventListener) {
      window.addEventListener("storage", handle_storage, false);
      } else {
      window.attachEvent("onstorage", handle_storage);
      };

      Функция обратного вызова handle_storage будет вызвана с объектом StorageEvent , за исключением Internet Explorer, где события хранятся в window.event .

      function handle_storage(e) {
      if (!e) { e = window.event; }
      }

      В данном случае переменная e будет объектом StorageEvent , который обладает следующими полезными свойствами.

      * Примечание: свойство url изначально называлось uri и некоторые браузеры поддерживали это свойство перед изменением спецификации. Для обеспечения максимальной совместимости вы должны проверить существует ли свойство url , и если нет проверить вместо него свойство uri .

      Событие storage нельзя отменить, внутри функции обратного вызова handle_storage нет возможности остановить изменение. Это просто способ браузеру сказать вам: «Эй, это только что случилось. Вы ничего не можете сделать, я просто хотел, чтобы вы знали».

      Ограничения в текущих браузерах

      Говоря об истории локального хранилища с помощью сторонних плагинов, я упомянул про ограничения каждой техники. Я вспомнил, что не сказал ничего об ограничениях теперь уже стандартного HTML5-хранилища. Я дам вам ответы, а затем объясню их. Ответы в порядке важности такие: «5 мегабайт», «QUOTA_EXCEEDED_ERR» и «нет».

      «5 мегабайт» - сколько места для хранения выдается по умолчанию. Это значение на удивление одинаково во всех браузерах, хотя и сформулировано не более как предложение в спецификации HTML5. Надо понимать, что вы храните строки, а не данные в исходном формате. Если вы храните много целых чисел или чисел с плавающей запятой, разница в представлении может оказаться большой. Каждая цифра в числе с плавающей запятой хранится в виде символа, а не в обычном представлении для таких чисел.

      «QUOTA_EXCEEDED_ERR» это исключение, которое вы получите, если превысите свою квоту в 5 Мб. «Нет» является ответом на следующий очевидный вопрос: «Могу ли я попросить у пользователя больше пространства для хранения?». На момент написания в браузерах не реализован какой-либо механизм для веб-разработчиков, чтобы запросить больше места для хранения. Некоторые браузеры (например, Opera) позволяют пользователю контролировать квоты хранилища для каждого сайта, но это чисто инициатива пользователя, не связанная с тем, что вы как разработчик можете встроить в ваше веб-приложение.

      HTML5-хранилище в действии

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

      Как это работает? Каждый раз, когда происходит изменение в игре, мы будем вызывать эту функцию.

      function saveGameState() {

      localStorage["halma.game.in.progress"] = gGameInProgress;
      for (var i = 0; i < kNumPieces; i++) {
      localStorage["halma.piece." + i + ".row"] = gPieces[i].row;
      localStorage["halma.piece." + i + ".column"] = gPieces[i].column;
      }
      localStorage["halma.selectedpiece"] = gSelectedPieceIndex;
      localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
      localStorage["halma.movecount"] = gMoveCount;
      return true;
      }

      Как видите, используется объект localStorage для сохранения процесса игры (gGameInProgress , логический тип). Далее перебираются все фишки (gPieces , массив JavaScript) и сохраняется строка и столбец для каждой из них. После чего сохраняются некоторые дополнительные состояния игры, включая выбранную фишку (gSelectedPieceIndex , целое число), фишку, которая находится в середине длинной серии прыжков (gSelectedPieceHasMoved , логический тип) и общее число сделанных ходов (gMoveCount , целое число).

      При загрузке страницы вместо автоматического вызова функции newGame() , которая бы вернула все переменные в исходные значения, мы вызываем resumeGame() . Функция resumeGame() с помощью HTML5-хранилища проверяет состояние игры в локальном хранилище. Если оно есть, то восстанавливает значения с использованием объекта localStorage .

      function resumeGame() {
      if (!supportsLocalStorage()) { return false; }
      gGameInProgress = (localStorage["halma.game.in.progress"] == "true");
      if (!gGameInProgress) { return false; }
      gPieces = new Array(kNumPieces);
      for (var i = 0; i < kNumPieces; i++) {
      var row = parseInt(localStorage["halma.piece." + i + ".row"]);
      var column = parseInt(localStorage["halma.piece." + i + ".column"]);
      gPieces[i] = new Cell(row, column);
      }
      gNumPieces = kNumPieces;
      gSelectedPieceIndex = parseInt(localStorage["halma.selectedpiece"]);
      gSelectedPieceHasMoved = localStorage["halma.selectedpiecehasmoved"] == "true";
      gMoveCount = parseInt(localStorage["halma.movecount"]);
      drawBoard();
      return true;
      }

      Наиболее важной частью этой функции является оговорка, о которой я упоминал ранее в этой главе и повторю здесь: данные хранятся в виде строк. Если вы храните нечто другое, а не строки, вам нужно конвертировать их при получении. К примеру, флаг о том, что игра в процессе (gGameInProgress ) является логическим типом. В функции saveGameState() мы просто храним его и не беспокоимся о типе данных.

      localStorage["halma.game.in.progress"] = gGameInProgress;

      Но в функции resumeGame() мы должны рассмотреть значение, полученное из локального хранилища в виде строки и вручную построить собственное логическое значение.

      gGameInProgress = (localStorage["halma.game.in.progress"] == "true");

      Аналогичным образом, число ходов хранится в gMoveCount как целое, в функции saveGameState() мы просто сохраняем его.

      localStorage["halma.movecount"] = gMoveCount;

      Но в функции resumeGame() мы должны конвертировать значение в целое, используя встроенную в JavaScript функцию parseInt() .

      gMoveCount = parseInt(localStorage["halma.movecount"]);

      За пределами пары ключ/значение: конкурентное видение

      Хотя в истории было много уловок и обходных путей, нынешнее состояние HTML5-хранилища на удивление благополучно. Новый API был стандартизирован и включен во все основные браузеры, платформы и устройства. Для веб-разработчика такое увидишь не каждый день, не так ли? Но это больше, чем «5 мегабайт пар ключ/значение» и будущее постоянного локального хранилища это... как бы сказать... ну, пусть конкурентное видение.

      Одно видение является аббревиатурой, которую вы уже знаете - SQL. В 2007 году Google запустил Gears, кроссбраузерный плагин с открытым исходным кодом, в который включена встроенная база данных на основе SQLite. Этот ранний прототип позже повлиял на создание спецификации Web SQL Database . База данных Web SQL (ранее известная как «WebDB») обеспечивает тонкую оболочку вокруг базы данных SQL, что позволяет делать следующие вещи из JavaScript:

      openDatabase("documents", "1.0", "Local document storage", 5*1024*1024, function (db) {
      db.changeVersion("", "1.0", function (t) {
      t.executeSql("CREATE TABLE docids (id, name)");
      }, error);
      });

      Как вы можете видеть, большая часть действий находится в строке с методом ExecuteSQL. Эта строка может поддерживать любые команды SQL, в том числе SELECT, UPDATE, INSERT и DELETE. Это все равно, что серверное программирования баз данных, за исключением того, что вы делаете это с JavaScript! О радость!

      Спецификация базы данных Web SQL была реализована в четырех браузерах и платформах.

      Поддержка базы данных Web SQL
      IE Firefox Safari Chrome Opera iPhone Android
      – – 4.0+ 4.0+ 10.5+ 3.0+ 2.0+

      Конечно, если вы использовали более чем одну базу данных в своей жизни, то знаете, что «SQL» это скорее маркетинговый термин, чем жесткий и быстрый стандарт (кто-то может сказать то же самое об HTML5, но это не важно). Конечно, есть актуальная спецификация SQL (она называется SQL-92), но в мире нет сервера баз данных, который соответствует только этой спецификации. Есть Oracle SQL, Microsoft SQL, SQL в MySQL, SQL в PostgreSQL, SQL в SQLite. В действительности, каждый из этих продуктов с течением времени добавляет новые функции SQL, так что недостаточно даже произнести «SQL в SQLite». Вы должны сказать «версия SQL, который поставляется вместе с SQLite версии X.Y.Z».

      Все это подводит нас к следующей оговорке, в настоящее время размещенной вверху спецификации Web SQL.

      Спецификация зашла в тупик: все заинтересованные разработчики используют серверный SQL (SQLite), но нам нужно несколько независимых реализаций, чтобы двигаться по пути стандартизации. Пока другие разработчики заинтересованы в реализации этой спецификации, описание диалекта SQL было оставлено как обычная ссылка на Sqlite, который не приемлем для стандарта.

      Именно на этом фоне я расскажу вам о другом конкурентном видении для продвинутых, постоянное локальное хранилище для веб-приложений: Indexed Database API , ранее известное как «WebSimpleDB», теперь ласково называемое IndexedDB.

      Indexed Database API предоставляет то, что называется хранилище объектов, при этом много идей заимствовано из баз данных SQL. Есть «базы данных» с «записями», каждая запись имеет определенное количество «полей». У каждого поля есть определенный тип данных, который определяется при создании базы данных. Вы можете выбрать часть записей, затем перечислить их «курсором». Изменения в хранилище объектов обрабатываются с «транзакциями».

      Если вы хоть раз программировали базы данных SQL, то эти термины, вероятно, вам знакомы. Основная разница в том, что хранилище объектов не имеет структурированного языка запросов. Вы не напишите условие вроде "SELECT * from USERS where ACTIVE = "Y"". Вместо этого используются методы, предоставляемые хранилищем объектов для открытия базы USERS, перечисления записей, фильтрации наших записей и использование методов доступа для получения значения каждого поля оставшихся записей. An early walk-through of IndexedDB (Ранний проход IndexedDB) это хорошее руководство о том, как работает IndexedDB и сравнение IndexedDB с Web SQL.

      На момент написания IndexedDB был реализован только в бета-версии Firefox 4. Для контраста, Mozilla заявила, что никогда не будет воплощать Web SQL. Google заявил, что они рассматривают поддержку IndexedDB для Chromium и Google Chrome. И даже Майкрософт заявил, что IndexedDB «отличное решение для веб».

      Что вы как веб-разработчик можете делать с IndexedDB? На данный момент практически ничего, кроме некоторых технологических демонстраций. Через год? Возможно.

      The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies .

      Web Storage concepts and usage

      The two mechanisms within Web Storage are as follows:

      • sessionStorage maintains a separate storage area for each given origin that"s available for the duration of the page session (as long as the browser is open, including page reloads and restores)
        • Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
        • Data is never transferred to the server.
        • Storage limit is larger than a cookie (at most 5MB).
      • localStorage does the same thing, but persists even when the browser is closed and reopened.
        • Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.
        • Storage limit is the maximum amongst the three.

      Specifications

      Specification Status Comment
      HTML Living Standard Living Standard

      Browser compatibility

      Window.localStorage

      https://github.com/mdn/browser-compat-data and send us a pull request.

      Desktop Mobile
      Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
      localStorage Chrome Full support 4 Edge Full support 12 Firefox Full support 3.5 IE Full support 8 Opera Full support 10.5 Safari Full support 4

      Legend

      Full support Full support

      Window.sessionStorage

      The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

      Update compatibility data on GitHub

      Desktop Mobile
      Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
      sessionStorage Chrome Full support 5 Edge Full support 12 Firefox Full support 2 IE Full support 8 Opera Full support 10.5 Safari Full support 4 WebView Android Full support Yes Chrome Android Full support Yes Firefox Android Full support Yes Opera Android Full support 11 Safari iOS Full support 3.2 Samsung Internet Android Full support Yes

      Legend

      Full support Full support

      Private Browsing / Incognito modes

      Most modern browsers support a privacy option called "Incognito", "Private Browsing" or something similar that doesn"t store data like history and cookies. This is fundamentally incompatible with Web Storage for obvious reasons. As such, browser vendors are experimenting with different scenarios for how to deal with this incompatibility.

      Most browsers have opted for a strategy where storage APIs are still available and seemingly fully functional, with the one big difference that all stored data is wiped after the browser is closed. For these browsers there are still different interpretations of what should be done with existing stored data (from a regular browsing session). Should it be available to read when in Private mode? Then there are some browsers, most notably Safari, that have opted for a solution where storage is available, but is empty and has a quota of 0 bytes assigned, effectively making it impossible to write data to it.

      Developers should be aware of these different implementations and take them into account when developing websites depending on Web Storage APIs. For more information please have a look at this WHATWG blog post that specifically deals with this topic.

      Прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.

      Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».

      Что такое localStorage?

      Так выглядит JavaScript объект:

      Var myCar = { wheels: 4, doors: 4, engine: 1, name: "Jaguar" }

      А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.

      { "firstName": "Иван", "lastName": "Иванов", "address": { "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ] }

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

      Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.

      Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку

      Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.

      Кстати, вы должны знать как localStorage работает с доменами. Для каждого домена ваш браузер создает свой объект localStorage, и редактировать или просматривать его можно только на этом домене. Например, с домена mydomain-1.com нельзя получить доступ к localStorage вашего mydomain-2.com .

      Зачем мне нужен localStorage?

      LocalStorage нужен только для одного - хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.

      Как мне начать работать с localStorage?

      Очень просто.

      Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.

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

      Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);

      localStorage.getItem("ключ")

      Берем определенное значение из хранилища по ключу.

      localStorage.removeItem("Ключ")

      Удаляем ключ

      localStorage.clear()

      Очищаем все хранилище

      Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что – весь код пишем в js-файл.

      //Добавляем или изменяем значение: localStorage.setItem("myKey", "myValue"); //теперь у вас в localStorage хранится ключ "myKey" cо значением "myValue" //Выводим его в консоль: var localValue = localStorage.getItem("myKey"); console.log(localValue); //"myValue" //удаляем: localStorage.removeItem("myKey"); //очищаем все хранилище localStorage.clear() То же самое, только с квадратными скобками: localStorage["Ключ"] = "Значение" //установка значения localStorage["Ключ"] // Получение значения delete localStorage["Ключ"] // Удаление значения

      Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.

      //создадим объект var obj = { item1: 1, item2: , item3:"hello" }; var serialObj = JSON.stringify(obj); //сериализуем его localStorage.setItem("myKey", serialObj); //запишем его в хранилище по ключу "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //спарсим его обратно объект

      Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите - получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.

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

      Вместо заключения

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