HTML

HTML5 localStorage — как сохранить данные на клиенте?

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


Познакомимся с использованием localStorage на примере создания примитивного приложения — списка дел на сегодня. Ничего сложного в приложении не будет — только строка ввода и не форматированный список, куда будут добавляться создаваемые записи. Записи будем сохранять по нажатию Enter. Одновременно с добавлением в список мы будем добавлять запись в localStorage. Чтобы сохранить запись в localStorage нужно сгенерировать для записи некоторый уникальный ключ. Его мы создадим с помощью маски, общей для всех ключей, а также уникального номера. Эту же маску мы сохраним в атрибут data-itemid в html элементе li. Для этого мы воспользуемся методом

Чтобы выводить все записи, сохраненные в localStorage, мы будем просматривать всё его содержимое. Для этого, узнаем количество записей в localStorage с помощью свойства length. После чего, если есть записи, то считаем их ключи —

Где i — номер записи. С помощью полученного ключа keyName мы можем получить значение записи из localStorage. Для этого есть функция:

Таким образом, пройдя все ключи в localStorage и получив их ключи и значения, мы можем вывести все записи в список на web-странице.

Удалять уже созданные записи будем по клику на них. Чтобы удалить запись из localStorage воспользуемся методом

Где keyName мы легко получим из атрибутов html тега, куда мы его заранее сохранили.

Попробовать получившееся приложение вы можете здесь. Исходники можно скачать с gitHub.
Код получившейся страницы с таким простым приложением для ведения текущих дел приведен ниже:

Делись:

Оставь комментарий!

One thought on “HTML5 localStorage — как сохранить данные на клиенте?

Добавить комментарий