LocalStorage на пальцах


Оглавление (нажмите, чтобы открыть):

Сохранение изменений | localstorage и sessionStorage | JavaScript

Что такое localstorage

Пользователь активно работает со страницей: заполняет поля формы, нажимает на кнопки, открывает скрытый блок и т.п. Но при обновлении страницы результат исчезает, HTML-документ возвращаясь в исходное состояние. Чтобы браузер запоминал выбор человека можно воспользоваться локальным хранилищем.

localStorage — «ключ/значение» хранится в браузере, пока пользователь не очистит его локальное хранилище. Можно несколько дней не заходить на веб-проект и по возвращении на сайт увидеть ранее заполненную форму.

Размер localstorage

«A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion in the future.» [w3.org] То есть рекомендуется предоставлять одному домену как минимум 5 мегабайт. Большинство браузеров используют именно этот лимит.

Что такое sessionStorage

sessionStorage — «ключ/значение» хранится в браузере пока открыта вкладка. То есть можно свободно перемещаться по сайту, обновлять страницу, но не закрывать вкладку или окно браузера.

Как сохранить действие после нажатия кнопки в JS

Задача: если элемент щелчком вывели на экран, то не удалять его в течении длительного времени.

открыть Я тут. Когда вы вернётесь спустя пару дней я снова буду тут.

Автосохранение заполненных полей на JavaScript

Вы никогда не сталкивались с ситуацией, когда заполняешь форму (регистрации или комментариев), нажимаешь кнопку «Отправить», а вам показывается сообщение об ошибке и всё ранее написанное удаляется? Крайне неприятно. Задача: сохранить заполненные поля, пока открыта вкладка. На новой вкладке данные должны пропадать. Базой послужил код с этого сайта.

Задача: если человек пришёл первый раз и ни разу не менял значение поля даты, то нужно показать ему текущую дату, иначе ту, которую он ввёл последний раз. Практическое применение.

Сохранять у чебокса checked при обновлении страницы

Чтобы браузер пользователя запоминал какую радиокнопку тот выбрал в прошлый раз

Сохранять выбранное значение select

sessionstorage один раз javascript

23 комментария:

диана галиева Огромное спасибо за твои топики! Всегда помогают! shpargalkablog.ru рулит. NMitra Благодарю за тёплые слова 🙂 Анонимный Здравствуйте а как сохранять у чебокса checked при обновлении страницы если несколько чекбоксов с name=»formDoor[]». Спасибо NMitra Здравствуйте, дополнила статью радиокнопками Анонимный Здравствуйте!
Как вывести значение ключа, например в div’e, если ввести ключ в input?
LocalStorage: apple (ключ) — fruit (значение)
Например ввожу: apple
Нажимаю Enter и в div’е появляется слово: fruit

? NMitra document.getElementBy >document.getElementBy >> Анонимный 1) Ввожу в input: apple=fruit
2) Жму Enter (код клавиши вроде 13?)
3) В LocalStorage станет: apple (ключ) — fruit (значение)
Было просто супер! NMitra Два инпута легче сделать
document.getElementBy >document.getElementBy >function raz() <
localStorage.setItem(document.getElementById(«in»).value, document.getElementById(«in1»).value)
> Анонимный Большое вам спасибо! Отличный блог = отличный материал! Анонимный В input ( ) ввожу: apple=fruit

document.getElementBy >var result = str.split(‘=’);
localStorage.setItem( . всё, что до знака «=» положить в столбец «key» LocalStorage . )
localStorage.setItem( . всё, что после знака «=» положить в столбец «value» LocalStorage . )
>

Хочется чтобы был всё-таки один input.
В input’e знак «=» будет только один раз!
Был бы просто счастлив! NMitra document.getElementBy >function raz() <
var str = document.getElementById(«in»).value;
localStorage.setItem(str.split(‘=’)[0], str.split(‘=’)[1]);
> Анонимный Вау! Чудеса! Огромнейшее спасибо! Я счастлив! Это лучший блог, что я видел! Анонимный LocalStorage (key — value):
Item1 — a
Item2 — b
Item3 — c
.

Главное условие:
! При создании записи в LocalStorage не должно быть одинаковых ключей (весь список ключей в LocalStorage должен состоять из РАЗНЫХ уникальных ключей без дублирования)

Процедура:
1) Пользователь вводит имя ключа в поле ввода: Например, Item1
2) Считываем ключ (получаем value поля ввода, в которое пользователь вводил ключ)
3) Очищаем поле ввода
4) Проверяем, есть ли данный ключ в LocalStorage.
Если есть, то выводим его значение в div (в данное примере значение ключа Item1 = a)
Если нет, то создаем новую запись с этим ключом (см. Главное условие)

Как сохранить массив или объект в localstorage?

В этой небольшой статье мы научимся сохранять массивы и объекты JavaScript в локальном хранилище браузера – HTML5 localStorage.

Сохранение массива в localStorage

HTML5 localStorage позволяет хранить пары данных ключ/значение. И ключ, и значение должны быть строками.

Чтобы сохранить массив в объекте localStorage в виде пары ключ/значение, необходимо закодировать массив в строку JSON. И при извлечении, соответственно, нужно декодировать его обратно в массив.

Вот пример кода:

let array = [1, 2, 3];


localStorage.setItem(array, JSON.stringify(array));
array = JSON.parse(localStorage.getItem(«array»));

console.log(typeof array); // объект
console.log(array); // [1, 2, 3]

Сохранение объекта в localStorage

Чтобы сохранить объект как пару ключ/значение, необходимо, также как и массив, закодировать объект в строку JSON. И при извлечении нужно декодировать его обратно в объект.

localStorage.setItem («object», JSON.stringify(«object»));
object = JSON.parse (localStorage.getItem («object»));

console.log(typeof object); // объект
console.log(object); // Объект

Вот в такой небольшой статье мы с Вами разобрали то, как сохранять массивы и объекты JavaScript в хранилище localStorage. Однако, так как это только вершина айсберга под названием JavaScript, то предлагаю Вам ознакомится с моим видеокурсом «JavaScript, jQuery и Ajax с Нуля до Гуру».

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Использование localStorage для нужд JavaScript

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

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

    Что такое localStorage?

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

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

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

    Мастер Йода рекомендует:  Алгоритмы и структуры данных для начинающих связный список

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

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


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

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

    Поскольку далее в своем примере мы будем использовать jQuery , вам также необходимо будет подключить эту библиотеку в своей HTML разметке.

    JavaScript

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

    $(‘#add’).click( function() <
    var Description = $(‘#description’).val();
    //если текстовое поле не заполнено
    if($(«#description»).val() == ») <
    $(‘#alert’).html(«Внимание! Введите запись в текстовое
    поле.»);
    $(‘#alert’).fadeIn().delay(1000).fadeOut();
    return false;
    >

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

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

    // Добавляем запись в существующий список
    $(‘#todos’).prepend(»
    » + Description + » «);
    // Очищаем поле ввода
    $(‘#form’)[0].reset();
    var todos = $(‘#todos’).html();
    localStorage.setItem(‘todos’, todos);
    return false;
    >);

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

      и

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

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

    // если в локальном хранилище уже есть данные, то отображаем их
    if(localStorage.getItem(‘todos’)) <
    $(‘#todos’).html(localStorage.getItem(‘todos’));
    >

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

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

    // Полная очиска localStorage
    $(‘#clear’).click( function() <
    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’)[0].reset();
    var todos = $(‘#todos’).html();
    localStorage.setItem(‘todos’, todos);
    return false;
    >);

    $(‘#clear’).click( function() <
    window.localStorage.clear();
    location.reload();
    return false;
    >);

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

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

    Заключение.

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

    ToDo лист на LocalStorage и jQuery с возможностью редактирования задач

    Здравствуйте, коллеги. Чуть ниже представлен алгоритм написания ToDo листа на jQuery с использованием локального хранилища LocalStorage + возможность редактирования и удаления каждой отдельной задачи из списка. В результате получиться должно следующее — демо. За код прошу строго не судить, т.к. в JS я только начинаю. Однако дельным советам я буду только рад.

    Для начала создадим разметку. Стоит заметить, что разметка здесь будет минимальной, т.к. основные действия по добавлению, редактированию и удалению элементов ToDo листа будут происходить динамически.

    ToDo list

      class = «todo-list» >

    Классам не удивляйтесь. Я считаю, что для шустрой верстки bootstrap — это то, что нужно. Стили я отображать в статье не буду, т.к. они здесь не главное. Если будет желание — посмотрите в демо примере.

    Справочно. LocalStorage имеет всего 5 методов:
    .key() — принимает в качестве параметра индекс ключа, по которому можно вытащить его имя. Как и в массиве нумерация начинается с нуля.
    .getItem() — метод, принимающий в качестве параметра имя ключа и возвращающий из LocalStorage его значение.
    .setItem() — метод, позволяющий записать в LocalStorage пару «ключ — значение». Принимает два параметра, соответственно («ключ — значение»).
    .removeItem() — удаляет пару «ключ — значение» из LocalStorage. Принимает в качестве параметра только имя ключа, по которому и удаляет пару.
    .clear() — очищает весь LocalStorage. Параметров не имеет.

    Так же имеется единственное свойство .length , которое возвращает количество записанных элементов.

    В меру своих умственных способностей теперь я постараюсь расписать логику работы скрипта и пойду от общего к частному:
    1) Нам нужно первым делом перехватить содержимое поля ввода и записать его в LocalStorage и вывести в список

      на странице.
      2) Затем при обновлении страницы из LocalStorage достать записанные задачи и через цикл их перезаписать в этот список, т.к. после обновления список будет пустой.
      3) Далее мы напишем функционал удаления и редактирования отдельной таски. Здесь как раз может возникнуть затык, т.к. ключи, по которым мы будем добавлять значения в LocalStorage после удаления элемента из середины списка собьются с начнут друг друга перезаписывать, но об этом чуть дальше.

    Учимся работать с локальным хранилищем (LocalStorage) браузера (Замена Cookie)

    С приходом HTML5 у нас с вами появилась уникальная возможность уйти от использования Куки к более современному способу сохранения данных в браузере.

    Для начала посмотрите ДЕМО

    Моё тестирование в редакторе: КЛИК

    Почему нужно уходить с использования Куки? Тут есть ряд причин — куки достаточно медленные, у них всегда есть срок годности и ограничение в объёме хранимых данных всего около 4 килобайт, в то время как у Локального хранилища сплошные плюсы — они очень быстрые, у них нет срока жизни и объём данных, который может вмещать в себя хранилище, варьируется от 2 до 10 мегабайт!

    Мастер Йода рекомендует:  Как айтишнику искать и найти первую работу — отвечают эксперты

    Сегодня я расскажу вам, как пользоваться локальным хранилищем (LocalStorage) и хранилищем текущей сессии (SessionStorage)

    1#: Локальное хранилище (LocalStorage)

    На самом деле всё элементарно. Для работы нам нужно знать всего три параметра, чтобы управлять записями в локальном хранилище:

    А) Создание новой записи (Изменение старой):

    HTML5 localStorage в Javascript

    Объект window имеет свойства localStorage и sessionStorage. Объект localStorage не имеет срока хранения информации (может хранить вечно), а sessionStorage очищается в момент завершения сессии браузера. Преимущества localStorage и sessionStorage перед куками:

    1. Можно хранить значительно больше информации. Около 5 Мбайт для большинства браузеров.
    2. Значение из хранилищ НЕ передаются на сервер при каждом запросе.

    У браузеров, поддерживающих хранилища, переменные localStorage и sessionStorage определены на уровне окна. Поддержку localStorage, например, можно определить так: ‘localStorage’ in window && window [ ‘localStorage’ ] ! == null .

    Полезные методы этих хранилищ:

    localStorage.getItem(key);
    sessionStorage.getItem(key);

    Возвращает значение по ключу.

    localStorage.setItem(key, value);
    sessionStorage.setItem(key, value);

    Добавляет значение value для ключа key в хранилище. И key и value являются строками. То есть метод устанавливает строковое значения для строкового ключа. После установки значение можно вытащить по ключу с помощью метода getItem.

    localStorage.removeItem(key);
    sessionStorage.removeItem(key);

    Удаляет пару ключ-значение из хранилища.

    localStorage.clear();
    sessionStorage.clear();

    Удаляет все пары ключ-значение из хранилища.

    Размеры хранилищ ограничены. В разных браузерах стоят разные ограничения на размер хранилищ localStorage и sessionStorage.

    Можно отслеживать изменения в хранилищах. Для этого нужно повесить обработчик события storage на объект window:

    JavaScript свойство Window.localStorage

    Определение и применение

    JavaScript свойство localStorage объекта Window возвращает ссылку на локальный объект хранения (объект Storage ), используемый для хранения данных, которые могут быть доступны только создавшему его источнику.

    Интерфейс Storage , принадлежащий API веб-хранилища предоставляет доступ к локальному объекту хранения (localStorage), или объекту хранения текущего сеанса (sessionStorage) для определенного домена (создавшего объект хранения источника):

    • sessionStorage — поддерживает отдельную область хранения для каждого заданного источника, доступную на время сеанса страницы (пока открыт браузер, включая перезагрузку и восстановление страницы).
    • localStorage — делает то же самое, но сохраняется даже при закрытии и повторном открытии браузера.

    Эти механизмы доступны через свойства объекта Window sessionStorage и localStorage (точнее говоря, в браузерах объект Window реализует объекты WindowLocalStorage и WindowSessionStorage , которые содержат свойства localStorage и sessionStorage). Вызов одного из этих свойств создаст экземпляр объекта Storage , с помощью которого можно устанавливать, извлекать и удалять элементы данных из хранилища. Более подробное описание этого объекта вы можете получить перейдя в раздел Storage .


    Для localStorage и sessionStorage для каждого домена используется отдельный объект хранения — они функционируют и управляются отдельно друг от друга.

    Обращаю Ваше внимание, что объем веб-хранилища ограничен размером, и может составлять от 5 до 10 мегабайт, в зависимости от производителя браузера. Это значительно больший объем места на диске в сравнении с cookie, которому доступно всего 4 Кбайта.

    Поддержка браузерами

    Свойство Chrome

    Firefox Opera Safari IExplorer Edge
    localStorage Да Да Да Да Да Да

    JavaScript синтаксис:

    Спецификация

    Исключения

    Тип исключения Описание
    SecurityError Возникает в том случае, если запрос нарушает решение политики или источник не является допустимым. Например, у пользователя может быть настроен браузер для отказа в разрешении на сохранение данных для указанного источника.

    Пример использования

    В этом примере с использованием атрибута событий onload, установленном на элементе , мы задаем срабатывание функции init() после завершения полной загрузки страницы. Эта функция с помощью метода getItem() пытается получить значение из локального хранилища (localStorage) по указанному ключу и инициализировать переменную этим значением. Если переменная содержит значение по указанному ключу (не равна null ), то мы устанавливаем элементу цвет заднего фона соответствующий значению этой переменной. С помощью JavaScript метода getElementBy >Document выбираем элемент с определенным глобальным атрибутом id и устанавливаем этому элементу значение, содержащееся в переменной. Кроме того, мы вызываем функцию updateLocalStorageLength(), которая находит элемент с определенным id и устанаваливает в качестве содержимого элемента числовое значение, которое соответствует числу элементов данных, хранящихся в хранилище.

    С использованием атрибута событий onchange, установленном на элементе мы при изменении значений элемента вызываем функцию setStyles(). Эта функция находит элемент по >try. catch с использованием метода setItem() мы пытаемся добавить или обновить ключ со значением внутри локального хранилища, содержащимся в переменной, и устанавливаем элементу цвет заднего фона, соответствующий этому же значению. Если по каким-то причинам произойдет ошибка, то мы выведем эту ошибку в консоль (перехватим). Обратите внимание, что мы вызываем функцию updateLocalStorageLength().

    С использованием атрибута событий onclick при нажатии на кнопку (HTML элемент ) вызываем функцию, которая с помощью метода clear() производит очистку всех ключей из объекта локального хранилища. Кроме того, находим элемент по id и устанавливаем пустое значение, элементу устанавливаем белый цвет заднего фона. После этого мы вызываем функцию updateLocalStorageLength() и обновляем информацию о числе элементов данных, хранящихся в хранилище.

    Результат нашего примера:

    Пример использования методов getItem(), setItem() и clear() объекта Storage

    В следующем примере мы рассмотрим совместное использование методов getItem(), setItem() и removeItem() объекта Storage .

    В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент ) вызываем функцию, которая:

    • Инициализирует две переменные, первая переменная содержит результат вызова метода getItem(), который позволяет получить значение из хранилища по указанному ключу, а вторая содержит ссылку на элемент с определенным глобальным атрибутом >null ), то мы с помощью метода removeItem() удаляем указанный ключ из объекта хранилища и устанавливаем новое текстовое содержимое элементу, ссылку на который содержит вторая переменная.
    • Если значение первой переменной соответствует значению null , то внутри конструкции try. catch с использованием метода setItem() мы пытаемся добавить ключ с произвольным строковым значениеми и устанавливаем новое текстовое содержимое элементу . Если по каким-то причинам произойдет ошибка, то мы её перехватим, а информацию о ней добавим в качестве нового текстового содержимого элемента .

    Результат нашего примера:

    Пример использования методов getItem(), setItem() и removeItem() объекта Storage JavaScript Window

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

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

    Здесь есть довольно простое решение, которое заключается в использовании Local storage. Хорошая черта Local storage заключается в том, что вы можете сохранять информацию на жесткий диск пользователей, так что, когда они обновляют страницы со списком запланированных задач, все остается на своих местах.

    Что такое Local storage?

    Local storage (локальное хранилище) – это часть веб-хранилища, которое является частью спецификации HTML5. В спецификации приводится две опции хранения данных:

    * Local storage: позволяет хранить данные без срока истечения, и именно его мы сегодня будем использовать, так как нам нужно, чтобы списки запланированных задач оставались на странице насколько возможно долго.
    * Session Storage: сохраняет данные лишь на протяжении отдельной сессии. Так что, если пользователь закроет вкладку, а затем снова откроет, – все данные пропадут.

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

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

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

    Итак, наш html-код будет выглядеть следующим образом:

    Здесь у нас довольно простой HTML, в котором мы динамически будем публиковать контент при помощи javascript.


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

    Так как мы занимаемся разработкой простого приложения для составления списка запланированных задач, здесь первое, о чем нам нужно подумать, это о том, чтобы уловить момент нажатия по кнопке добавления задачи, и о том, чтобы проверить, не пуста ли форма в этот момент:

    Здесь мы проверяем нажатие по кнопке, и запускаем простой тест на то, заполнил ли пользователь необходимые формы. Если же нет, то появляется div с предупреждением, и держится на виду 1000ms, после чего исчезает. Наконец, мы возвращаем false, и поэтому браузер не считывает остальную часть скрипта, и не добавляет пункт в список.

    Следующее, что нам нужно сделать, это внести пункт списка со значением, предоставленным в поле ввода. Это происходит тогда, когда пользователь вводит все нужные данные и нажимает кнопку – каждая новая задача становится в начало списка, и данные сохраняются в local storage следующим образом:

    Как видно, здесь используется довольно стандартный jQuery, и когда дело доходит до local storage, нам нужно сохранить ключ и значение. Ключ – это название, которое мы сами указали, и в данном случае это ‘todos’. Далее нам нужно указать, что мы собираемся сохранить, и в данном случае – это весь HTML, который помещен внутрь ненумерованного списка ‘todos’. Как видно, мы просто извлекли эти данные при помощи jQuery, и вернули значение false, чтобы наша форма не запустила подтверждение и перезапуск страницы.

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

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

    Если вы протестируете наше небольшое приложение, перезагрузив страницу, то увидите, что оно уже работает, и все, что нам осталось сделать, это создать функцию для тех случаев, когда пользователь решает очистить все формы. Когда это происходит, нам нужно очистить все содержимое local storage, и перезагрузить страницу, чтобы изменения вступили в силу, затем мы возвращаем значение false, чтобы предотвратить появление знака # в начале URL.

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

    Поддержка веб-хранилища довольно хорошая. Оно поддерживается всеми современными браузерами, включая даже IE8. Проблемы могут возникнуть разве что в IE7, если вы до сих пор имеете дела с этой версией.

    Local storage в маленьких приложениях может оказаться очень полезным свойством. Что еще нужно для хранения небольшого объема данных?

    Как вы сохраняете данные из javascript? Предпочитаете cookies или базы данных? А может быть Local storage? Пожалуйста, расскажите нам в комментариях!

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Хранение данных в локальном хранилище localStorage

    Дата публикации: 2020-02-21

    От автора: приветствую вас, друзья. В предыдущей статье мы с вами познакомились с плагином jQuery Cookie, который предоставляет простой интерфейс для работы с куками и, соответственно, позволяет хранить данные в куках. В этой статье мы узнаем еще об одном способе хранения данных, речь идет о локальном хранилище localStorage.

    Итак, объект localStorage является глобальным объектом, в котором нам доступно целых 5 Мб места, т.е. записать туда мы можем очень-очень много разных данных. При этом эти данные будут храниться сколь угодно долго. Это очень удобно.

    Для работы с объектом нам предлагается некоторый набор методов:

    setItem() — запись в хранилище;

    getItem() — получение данных их localStorage;

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    removeItem() — удаление конкретных данных;

    clear() — очистка хранилища полностью.

    Работа с представленными методами очень похожа на работу с куками в предыдущей статье. Давайте попробуем что-то записать в хранилище.

    Работа с Web хранилищами, на примере корзины для покупок

    Здравствуйте, уважаемые читатели XoZbloga! Не так давно я уже писал пост о локальном хранении пользовательских данных, с помощью технологии Web SQL Database. В этом уроке продолжу данную тему и разберу на примере, корзины для покупок, способ работы с web хранилищами.

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

    Технология Web хранилищ позволяет хранить данные в браузере пользователя, похожая на cookie (куки), однако с расширенными возможностями. Изначально была частью спецификации HTML5, но сейчас является самостоятельной спецификацией. На данный момент поддерживается всеми современными браузерами:

    Существует два типа web хранилищ:

    • Local Storage (Локальное хранилище) — хранит данные постоянно. И это тот тип, который мы будем использовать.
    • Session Storage (Сессионное хранилище) — хранит данные в течение одной сессии. Пока открыта вкладка браузера, данные хранятся.


    Структура хранилища состоит из пар ключ (key) — значение (value).

    HTML разметка

    Заострять особое внимание на разметке не будем. Работа с локальным web хранилищем рассматривается на примере импровизированной корзины покупок посетителя интернет-магазина. Поэтому нам понадобится картинка товара, поле для ввода количества и кнопка для добавления в корзину. Следующий код представляет собой фрагмент блока с одним товаром:

    Стоит обратить внимание на атрибут id у поля для ввода и атрибут data-pr у кнопки, они идентичны. То есть для каждого поля ввода своя кнопка. Ну и конечно подразумевается, что формирование разметки происходит автоматически (в цикле) на основании данных из базы. Поэтому трудностей с этим, возникнуть не должно.

    Под блоком с товарами, расположим корзину, пусть это будет маркированный список:

    Использование интерфейса локального хранилища

    Спецификация Web Storage описывает два объекта хранения, local storage и session storage, оба доступны через глобальные переменные LocalStorage и sessionStorage , которые определены на уровне окна (window level).

    Проверка совместимости

    Перед тем как приступить к работе с хранилищем, необходимо проверить на совместимость с этой технологией браузер пользователя. Для этого можно использовать следующий JavaScript код:

    // Функция которая возвращает истину если браузер поддерживает локальные хранилища
    function web_storage ( ) <
    try <
    return ‘localStorage’ in window && window [ ‘localStorage’ ] !== null ;
    > catch ( e ) <
    return false ;
    >
    >

    if ( web_storage ( ) ) <
    // есть поддержка localStorage
    > else <
    // нет поддержки localStorage
    >

    Следующие методы доступны как для локального так и для сессионного хранилища, однако рассматривать будем на примере первого.

    Добавление/изменение данных в хранилище

    Чтобы изменить значение или добавить новое значение, используется метод setItem() :

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

    Получение данных из хранилища

    После того как в хранилище появились данные, их можно запросить с помощью метода getItem() :

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

    Удаление данных

    Если Вам нужно удалить сохраненное значение из объекта хранения, вы можете сделать это с помощью метода removeItem() :

    Либо полностью очистить локальное хранилище, с помощью метода clear() :

    Хранение сложных типов данных

    Web Storage ограничивается хранением только строковых значений, так что не возможно хранить другие типы данных без их преобразования в строку. Однако можно легко обойти это ограничение, если использовать кодирование данных в виде JSON:

    При чтении нужно не забыть декодировать данные обратно:

    Перебор данных хранилища

    Для того, чтобы определить какое количество пар ключ — значение вы храните в local storage, используется свойство length :

    Метод key() принимает один аргумент — индекс от 0 до length-1 , и возвращает имя ключа в этом положении:

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

    jQuery

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

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

    Последним штрихом, можно считать обработчик удаления одного из элементов в корзине. Для этого у нас есть кнопки, у каждого элемента списка, вот код обработки:

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

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

    Мастер Йода рекомендует:  Всё о сортировке на Python
    Добавить комментарий