Создание приложения “список дел” (амер. to-do list), обычно, является первым приложением, которое вы делаете при изучении JavaScript, но проблема всех этих приложений является в том, что, когда вы перезагружаете страницу все эти списки исчезают.
Существует простое решение - использование локального хранилища. Преимуществом локального хранилища является то, что вы можете сохранить биты данных на компьютере пользователя, и когда произошла перезагрузка страницы, все списки задач остались на месте.
Что такое локальное хранилище?
Локальное хранение данных является частью сети хранения, которое само по себе является частью спецификации HTML5. Есть два варианта для хранения данных в спецификации:
Простыми словами, все, что веб хранилище делает, это сохраняет key/value пары с именем локально, и в отличие от cookies, эти данные сохраняются даже если вы закроете браузер или выключите компьютер.
Если мы думаете о списке дел, то вам понадобится следующие:
Таким образом, наш 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("
Как вы видите, это довольно стандартный 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("
Поддержка браузеров
Поддержка Web Storage довольно хороша для HTML5 спецификаций, он поддерживается всеми основными браузерами и даже IE8.
Последнее обновление: 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
Перевод статьи:
How to use local storage for JavaScript.
Sara Vieira.
Знакомство с основами программирования языка JavaScript зачастую начинается с создания простейших приложений, таких, к примеру, как электронная записная книжка, используемая нами для записи дел и событий, о которых мы можем забыть. Но подобным приложениям свойственна одна проблема — после перезагрузки страницы, список всех оставленных ранее записей исчезает, то есть приложение возвращается в свое исходное состояние.
Существует очень простой выход из данной ситуации, предусматривающий использование механизма локального хранения localStorage . Благодаря тому, что localStorage позволяет нам сохранять необходимые данные на пользовательском компьютере, упомянутый выше список запланированных дел и событий будет все еще доступен после перезагрузки страницы, кроме того, localStorage является на удивление очень простым способом хранения данных и доступа к ним при необходимости.
Это механизм локального хранения данных, который является частью технологии Web Storage , предусмотренной HTML5 спецификацией. Имеется два варианта хранения данных, допустимые данной спецификацией:
Попросту говоря, все, что делает Web Storage , это хранит данные в форме именованный ключ/значение локально и в отличие от двух других методов, каждый из которых имеет свои недостатки (Сеансовое хранение информации предусматривает использование для этого серверной стороны, к тому же после закрытия сеанса пользователя эта информация удаляется, а cookies хотя и используют для хранения сторону клиента, но не надежны потому, что путем настроек браузера пользователь может отменить их поддержку.) сохраняет данные даже в том случае, если вы закрыли браузер или выключили свой компьютер. (*Я позволил себе несколько изменить и дополнить содержание этого абзаца, поскольку считаю, что в оригинале автор допустил неточности. )
Если придерживаться нашего примера, в котором мы хотим создать электронный вариант записной книжки, то ниже представлены все необходимые компоненты для ее реализации:
В результате наша разметка должна иметь примерно такой вид:
Это вполне стандартный HTML шаблон, который мы можем заполнить динамически формируемым контентом с помощью JavaScript .
Применительно к структуре взятого в нашем примере простейшего приложения блокнота, первое, что нам необходимо сделать, это обеспечить отслеживание события нажатия кнопки «Добавить запись» и проверять, введена ли в текстовое поле для записи какая-нибудь информация, то есть в момент нажатия кнопки оно должно быть не пустым. Что-то на пример вот этого:
$("#add").click(function() {
//если текстовое поле не заполнено
$("#alert").html("Внимание! Введите запись в текстовое
поле.");
return false;
}
Вот что мы делаем с помощью этого фрагмента кода. При нажатии кнопки «Добавить запись» мы проверяем, ввел ли пользователь что-нибудь в поле для новой записи. Если он этого не сделал, то появляется предусмотренный нами для вывода сообщений div , информируя пользователя о том, что поле ввода записи не заполнено и затем, по истечении 1000ms (1 секунда) элемент div , а соответственно и сообщение, исчезает. Далее функция возвращает значение false , после чего браузер прекращает выполнение остальной части скрипта и приложение снова готово к вводу новой записи.
Следующим нашим шагом будет добавление в начало списка введенного в поле для записей значения путем генерации нового элемента списка. Таким образом, когда пользователь дописывает еще одну запись, то она всегда будет помещаться в начало списка намеченных дел и ожидаемых событий. После этого нам остается лишь сохранить список с помощью механизма localStorage :
// Добавляем запись в существующий список
$("#todos").prepend("
Как вы, возможно, заметили, здесь нет ничего необычного, используется стандартный вариант 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("
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 Storage
В интернете информацию можно сохранять в двух местах: на веб-сервере и на веб-клиенте (т.е. компьютере посетителя страницы). Определенные типы данных лучше хранить в одном из этих мест, а другие типы - в другом.
Правильным местом для хранения конфиденциальных и важных данных будет веб-сервер. Например, если вы положите какие-либо товары в свою корзину в онлайновом магазине, данные о вашей потенциальной покупке сохраняются на веб-сервере. На вашем компьютере сохраняется лишь несколько байтов данных для отслеживания, содержащих информацию о вас (или, вернее, о вашем компьютере), чтобы веб-сервер знал, какая из корзин ваша. Даже с новыми возможностями HTML5 изменять эту систему нет надобности - она надежная, безопасная и эффективная.
Но хранение данных на сервере не всегда является лучшим подходом, т.к. иногда легче хранить второстепенную информацию на компьютере пользователя. Например, имеет смысл хранить локально пользовательские настройки (скажем, параметры, которые определяют способ отображения веб-страницы) и состояние приложения (снимок текущего состояния веб-приложения), чтобы посетитель мог продолжить его выполнение с того же самого места позже.
До HTML5 единственным способом локального хранения данных было использование механизма файлов cookies , который первоначально был разработан для обмена небольшими объемами идентифицирующей информации между веб-серверами и браузерами. Файлы cookies подходят идеально для хранения небольших объемов данных, но модель JavaScript для работы с ними несколько неуклюжа. Система файлов cookies также вынуждает разработчика возиться со сроками действия и бесполезно пересылать данные туда и обратно по интернету с каждым запросом страницы.
В HTML5 вводится лучшая альтернатива файлам cookies, которая позволяет легко и просто сохранять информацию на компьютере посетителя. Эта информация может храниться на клиентском компьютере неограниченное время, не отправляется на веб-сервер (если только разработчик не сделает это сам), может быть большого объема и для работы с ней требуется всего лишь пара простых, эффективных объектов JavaScript.
Эта возможность называется веб-хранилищем (Web Storage) и особенно хорошо подходит для применения с автономным режимом работы вебсайтов, т.к. позволяет создавать самодостаточные автономные приложения, которые могут сохранять всю требуемую им информацию даже при отсутствии подключения к интернету.
Функциональность веб-хранилища HTML5 позволяет веб-странице сохранять данные на компьютере посетителя. Эта информация может быть кратковременной, которая удаляется после выключения браузера, или долговременной, которая остается доступной при последующих посещениях веб-страницы.
Сохраняемая в веб-хранилище информация в действительности сохраняется не в интернете, а на компьютере посетителя веб-страницы. Иными, словами, веб-хранилище означает хранение данных не в интернете, а хранение данных из интернета.
Существуют два типа веб-хранилищ, которые так или иначе связаны с двумя объектами:
Локальное хранилищеИспользует объект localStorage для хранения данных для всего веб-сайта на постоянной основе. Это означает, что если веб-страница сохранит данные в локальном хранилище, эти данные будут доступны для пользователя, когда он возвратится на эту веб-страницу на следующий день, на следующей неделе или в следующем году.
Конечно же, большинство браузеров также предоставляет пользователю возможность очистить локальное хранилище. В некоторых браузерах она реализована как стратегия "все или ничего", и посредством ее удаляются все локальные данные, во многом подобно тому, как удаляются cookies-файлы. (В действительности, в некоторых браузерах система cookies и локальное хранилище взаимосвязаны, так что единственным способом удалить локальные данные будет удаление cookies.) А другие браузеры могут предоставлять пользователю возможность просмотра данных для каждого отдельного веб-сайта и удалять данные для выбранного сайта или сайтов.
Хранилище данных сеансовИспользует объект sessionStorage для временного хранения данных для одного окна или вкладки браузера. Эти данные доступны лишь до тех пор, пока пользователь не закроет окно или вкладку, после чего сеанс заканчивается и данные удаляются. Но данные сеанса сохраняются, если пользователь переходит на другой веб-сайт, а потом возвращается обратно при условии, что это происходит в том же окне браузера.
С точки зрения кода веб-страницы, как локальное хранилище, так и хранилище данных сеансов работают абсолютно одинаково. Разница состоит лишь в длительности хранения данных.
Использование локального хранилища предоставляет наилучшую возможность для сохранения требуемой информации для последующих посещений вебстраницы пользователем. А хранилище сеансов служит для хранения данных, которые нужно передавать от одной страницы другой. (В хранилище сеансов можно также хранить временные данные, используемые только на одной странице, но для этой цели прекрасно работают обычные переменные JavaScript.)
Как локальное хранилище, так и хранилище сеансов связано с доменом веб-сайта. Таким образом, если сохранить в локальном хранилище данные для страницы www..html, эти данные будут доступны для страницы www..html, т.к. обе эти страницы имеют один и тот же домен. Но эти данные не будут доступны для страниц других доменов.
Кроме этого, т.к. веб-хранилище расположено на компьютере (или мобильном устройстве) данного пользователя, оно связано с этим компьютером, и веб-страница, открытая на данном компьютере и хранящая данные в его локальном хранилище, не имеет доступа к информации, которую она сохранила на другом компьютере. Подобным образом веб-страница создает отдельное локальное хранилище, если вы войдете в систему под другим именем пользователя или запустите другой браузер.
Хотя спецификация HTML5 не устанавливает никаких жестких правил в отношении максимального объема хранилища, большинство браузеров ограничивают его 5 Мбайт. В этот объем можно упаковать много данных, но его будет недостаточно, если вы хотите использовать локальное хранилище для оптимизации производительности и кэшировать в нем изображения или видео большого объема (и, по правде говоря, локальное хранилище не предназначено для таких целей).
Для хранения большого объема данных все еще развивающийся стандарт базы данных IndexedDB допускает локальное хранение намного большего объема - обычно 50 Мбайт для начала и больше, по согласию пользователя.
Прежде чем поместить фрагмент информации в локальное хранилище или хранилище сеансов, ему необходимо присвоить описательное имя. Это имя называется ключом (key) и нужно для того, чтобы данные можно было извлечь в будущем.
Синтаксис для сохранения фрагмента данных следующий:
localStorage = data;
// JS localStorage["username"] = "Ivan Petrov";
Конечно же, сохранять фрагмент статического текста не имеет смысла. Как правило нам требуется сохранять какие-либо переменные данные, например текущую дату, результат математического вычисления или текстовые данные, введенные пользователем в поля формы. Далее приведен пример сохранения введенных пользователем текстовых данных:
Function saveData() { // Получаем значения текстовых полей var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Сохраняем текст, введенный в текстовом поле, в локальном хранилище localStorage["localData"] = localData; // Сохраняем текст, введенный в текстовом поле, в хранилище сессий sessionStorage["sessionData"] = sessionData; } function loadData() { // Загружаем сохраненные данные из хранилищ var localData = localStorage["localData"]; var sessionData = sessionStorage["sessionData"]; // Отображаем эти данные в текстовых полях if (localData != null) { document.getElementById("localData").value = localData; } if (sessionData != null) { document.getElementById("sessionData").value = sessionData; } }
Страница содержит два текстовых поля: для локального хранилища (вверху) и для хранилища сеансов (внизу). Нажатие кнопки "Сохранить" сохраняет текст, введенный в текстовые поля, а нажатие кнопки "Загрузить" выводит в полях соответствующие сохраненные данные.
Веб-хранилище также поддерживает менее распространенный синтаксис свойств. Согласно правилам этого синтаксиса, мы обращаемся к ячейке хранения с именем username как localStorage.username, а не localStorage["username"]. Оба типа синтаксиса равнозначны, и использование того или другого является вопросом личного предпочтения.
В своих исследованиях веб-хранилища вы можете столкнуться с неожиданной проблемой. Во многих браузерах веб-хранилище работает только для страниц, предоставленных веб-сервером. При этом не важно, где расположен сервер, в интернете или на вашем собственном компьютере, самое главное, просто чтобы страницы не запускались с локального жесткого диска (например, двойным щелчком по значку файла страницы).
Эта особенность является побочным эффектом способа, которым браузеры выделяют место в локальное хранилище. Как ранее говорилось, браузеры ограничивают локальное хранилище для каждого веб-сайта 5 Мбайт, для чего им нужно ассоциировать каждую страницу, которая хочет использовать локальное хранилище, с доменом вебсайта.
Что же происходит, если открыть страницу, которая использует веб-хранилище, с локального жесткого диска? Все зависит от браузера. Браузер Internet Explorer, похоже, полностью утрачивает поддержку веб-хранилища. Объекты localStorage и sessionStorage исчезают, и попытка использовать их вызывает ошибку JavaScript.
В браузере Firefox объекты localStorage и sessionStorage остаются на месте и, вроде бы, поддерживаются (даже Modernizr определяет, что поддерживаются), но все, что отправляется на хранение, исчезает неведомо куда. В браузере Chrome опять же что-то другое - большая часть функциональности веб-хранилища работает как следует, но некоторые возможности (например, событие onStorage) не работают.
Подобные проблемы возникают и с использованием интерфейса File API. Поэтому вы избавите себя от многих хлопот, если поместите тестируемую страницу на тестовый сервер, чтобы избежать всех этих неопределенностей.
Веб-хранилище является одной из наиболее поддерживаемой возможностью HTML5, с хорошим уровнем поддержки в каждом основном браузере. В таблице ниже приведены минимальные версии основных браузеров, поддерживающих веб-хранилище:
Все эти браузеры предоставляют возможность локального хранилища и хранилища данных сеанса. Но для поддержки события onStorage требуются более поздние версии браузеров, например IE 9, Firefox 4 или Chrome 6.
Самой проблемной является версия IE 7, которая не поддерживает веб-хранилище вообще. В качестве обходного решения можно эмулировать веб-хранилище посредством файлов cookies. Это не совсем идеальное решение, но оно работает. Хотя официального сценария для закрытия этого пробела не существует, несколько хороших отправных точек можно найти на странице HTML5 Cross Browser (в разделе "Web Storage").
Привет всем! В этой статье мы разберем, что такое localStorage и как его использовать .
LocalStorage - локальное хранилище. Т.е. это специально отведенное место в браузере(что-то вроде небольшой базы данных), где мы можем записывать, читать и удалять какие-то данные. На самом деле, локальное хранилище очень похоже на COOKIE , но есть отличия. Вот давайте о них и поговорим. Cookie очень ограничены. В одной cookie может быть всего 4096 символов, а их количество на один домен примерно 30-50 в зависимости от браузера. В локальном хранилище мы можем хранить 5-10мб или даже больше на длительное время.
Самое большое отличие cookie от localStorage - это то, что первый работает с сервером, а второй нет, хотя это тоже можно сделать, но об этом немного позже. Используйте локальное хранилище там, где вам не нужна тесная работа с сервером, а нужно хранить какие-то временные данные. К примеру, представим, что вы создаете какое-то web-приложение, куда человек может зайти, ввести несколько задач, которые он хочет сделать за день и удалить те, которые уже выполнил. Зачем нам тут сервер? Правильно, не за чем. Вот тут и стоит использовать 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 там, где вам не нужно общаться с сервером, а нужно хранить данные локально, в браузере у пользователя. Все, что вам для этого нужно, мы рассмотрели в этой статье. Спасибо за внимание и до скорого!
