JavaScript-15-local-storage-и-json (1)

1. Local Storage и JSON

2. Введение

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае
sessionStorage) и даже после перезапуска браузера (при использовании localStorage).
В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Именно поэтому
мы можем хранить гораздо больше данных. Большинство современных браузеров могут выделить как
минимум 5 мегабайтов данных (или больше), и этот размер можно поменять в настройках.
Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки.
Всё делается при помощи JavaScript.
Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или
поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.

3. Использование

Объекты хранилища localStorage и
sessionStorage предоставляют одинаковые
методы и свойства:
• setItem(key, value) – сохранить пару
ключ/значение
• getItem(key) – получить данные по ключу key
• removeItem(key) – удалить данные с ключом
key
• clear() – удалить всё
• key(index) – получить ключ на заданной
позиции
• length – количество элементов в хранилище

4. Перебор ключей

5. Событие storage

Когда обновляются данные в localStorage или sessionStorage,
генерируется событие storage со следующими свойствами:
• key – ключ, который обновился (null, если вызван .clear()).
• oldValue – старое значение (null, если ключ добавлен
впервые).
• newValue – новое значение (null, если ключ был удалён).
• url – url документа, где произошло обновление.
• storageArea – объект localStorage или sessionStorage, где
произошло обновление.
Важно: событие срабатывает на всех остальных объектах
window, где доступно хранилище, кроме того окна, которое
его вызвало - это позволяет разным окнам одного источника
обмениваться сообщениями.

6. Только строки

Обратите внимание, что ключ и
значение для localStorage и
sessionStorage должны быть
строками.
Если мы используем любой другой
тип, например число или объект, то
он автоматически преобразуется в
строку.
При чтении все записанные данные
будут в формате строки.

7. JSON

JSON (JavaScript Object Notation) представляет
легковесный формат хранения данных. JSON описывает
структуру и организацию данных JavaScript. Простота
JSON привела к тому, что в настоящий момент он
является наиболее популярным форматом передачи
данных в среде web, вытеснив другой некогда
популярный формат xml.
Объекты JSON очень похожи на объекты JavaScript, тем
более что JSON является подмножеством JavaScript. В то
же время важно их различать: JavaScript является
языком программирования, а JSON является форматом
данных.
JSON поддерживает три типа данных: примитивные
значения, объекты и массивы. Примитивные значения
представляют стандартные строки, числа, значение null,
логические значения true и false.

8. JSON

9. storage + JSON

10. Практическая работа

1.
Добавьте на страницу кнопку, отображающую, сколько раз пользователь нажал на
неё
2.
При помощи localStorage, сделайте так, чтобы количество нажатий сохранялось при
перезагрузке страницы или браузера
3.
Добавьте кнопки для уменьшения и сброса счётчика. При сбросе счётчика
сохранённые данные должны удаляться
4.
При помощи события storage, синхронизируйте счётчик на всех вкладках сайта
5.
Добавьте на страницу список даты и времени, когда была загружена страница сайта
6.
При помощи JSON, сделайте сохранение и синхронизацию между вкладками сайта
функционала из задания 5

11. Домашнее задание

1. Добавьте на страницу большой прямоугольный div зелёного
цвета, при нажатии на который в месте клика будет
появляться небольшой синий круг
2. При помощи JSON, добавьте сохранение и синхронизацию по
вкладкам функционала из 1 задания