Клиентские хранилища и работа с данными

tl;dr – просто кладите json’ы в localStorage

Введение

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

​

Но прежде рассмотрим то какие веб-сайты бывают…

Статические веб-сайты

Статический сайт — это тот, который возвращает тот же жёсткий кодированный контент с сервера всякий раз, когда запрашивается конкретный ресурс. �Например, если у вас есть страница о товаре в /static/myproduct1.html, эта же страница будет возвращена каждому пользователю. �Если вы добавите ещё один подобный товар на свой сайт, вам нужно будет добавить ещё одну страницу (например, myproduct2.html) и так далее. Это может стать действительно неэффективным — что происходит, когда вы попадаете на тысячи страниц товаров? Вы повторяли бы много кода на каждой странице (основной шаблон страницы, структуру и т. д.), И если бы вы захотели изменить что-либо в структуре страницы — например, добавить новый раздел «связанные товары» — тогда вам придётся менять каждую страницу отдельно.

Статические веб-сайты

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

Динамические веб-сайты

Динамический сайт — это тот, который может генерировать и возвращать контент на основе конкретного URL-адреса запроса и данных (а не всегда возвращать один и тот же жёсткий код для определённого URL-адреса). Используя пример сайта товара, сервер будет хранить «данные» товара в базе данных, а не отдельные HTML-файлы. При получении GET-запроса для товара сервер определяет идентификатор товара, извлекает данные из базы данных и затем создаёт HTML-страницу для ответа, вставляя данные в HTML-шаблон.

Динамические веб-сайты

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

Динамические веб-сайты

Серверный код сайта может возвращать не только HTML-фрагменты и файлы в ответе. Он может динамически создавать и возвращать другие типы файлов (текст, PDF, CSV и т. д.) или даже данные (JSON, XML и т. д.).

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

Совсем недавно «Одностраничные приложения» стали популярными, где весь сайт написан с одним HTML-файлом, который динамически обновляется по мере необходимости.

Хранилища

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

Хранилище на стороне клиента работает по схожим принципам, но используется по-другому. Оно состоит из API-интерфейсов JavaScript, которые позволяют вам хранить данные на клиенте (то есть на компьютере пользователя), а затем извлекать их при необходимости.

Хранилища. Use-cases:

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

Хранилища

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

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

Старый подход: куки (Cookies)

Концепция хранения на стороне клиента существует уже давно.

С первых дней Интернета, использовали cookies для хранения информации, чтобы персонализировать пользовательский опыт на веб-сайтах.

Это самая ранняя форма хранилища на стороне клиента, обычно используемая в Интернете.

Cookies

HTTP Cookie (куки) – небольшая порция

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

Браузер всякий раз при открытии страницы

соответствующего сайта пересылает

сохранённый фрагмент данных обратно

веб-серверу через HTTP-заголовки.

Работа с Cookies

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

​

​

​

​

​

Приведённая код читает cookies установленные для�текущего сайта и возвращает коллекцию строк�вида ключ = значение.

​

Новый подход: Web Storage и IndexedDB

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

• Web Storage API обеспечивает очень простой синтаксис для хранения и извлечения данных, состоящих из пар 'ключ' : 'значение'. Это полезно, когда вам просто нужно сохранить некоторые простые данные, такие как имя пользователя, вошёл ли он в систему, какой цвет использовать для фона экрана и т. д.
• IndexedDB API обеспечивает браузер полной базой данных для хранения сложных данных. Это может быть использовано для хранения полных наборов записей клиентов и даже до сложных типов данных, таких как аудио или видео файлы.

Web Storage API

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

Web Storage API

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

• Session Storage обслуживает область хранения данных для каждого домена, доступное на протяжении сессии. �(пока браузер открыт, даже в случае перезагрузки страницы)
• Local Storage делает то же самое, но сохраняет данные даже в случае, если переоткрыть браузер.

Web Storage API

Обе имплементации доступы через свойства документа:

Window.sessionStorage и Window.localStorage соответственно.

​

Вызов одного из них создаёт представление объекта Storage, через который можно устанавливать, редактировать и удалять данные. �Для каждого из типа хранилищ и по каждому домену используется отдельное представление Storage объекта - они функционируют и управляются отдельно друг от друга.

​

Storage �Interface:

Web Storage limits

Web Storage

Так же, как и Cookies, объект Storage’а будет одинаковый для всех ваших открытых вкладок во всех окнах вашего браузера в рамках одного домена.

Если вы пользуетесь несколькими браузерами, то хранилища между ними синхронизированы не будут.

​

Web Storage Inner-tab communications

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

Операции которые изменяют состояние хранилища порождают событие типа ‘storage’. См. рисунок.

Web Storage Inner-tab communications

Пример взаимодействия из реальной жизни:

Когда вы меняете громкость трека в одной вкладке, а она меняется и ещё в той, где вы воспроизводите композицию.

Храним более сложную информацию в IndexedDB

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

Вы можете сохранить видео, фото, и прочие файлы с IndexedDB. 

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

​

IndexedDB

Использование IndexedDB является более сложным в сравнении с остальными методами хранения данных в браузере. Перед тем как мы сможем создавать/читать/обновлять/удалять какие-либо данные, нам надо сначала открыть базу данных и создать хранилища (аналогичные таблицам в базе данных).

Преимущества IndexedDB

• Могут обрабатывать более сложные структурированные данные.
• Может работать с разными “базами данными” и “таблицами” внутри каждой “базы данных”.
• Больше объем хранения.
• Больше контроля по взаимодействию с хранилищем.

​

А как хранить данные в хранилищах?

Вот мы рассмотрели хранилища, окей, а как нам хранить в них различные данные?

IndexedDB достаточно большая и сложная.

Cookies-ы не подходят т.к. ими чаще управляет сервер.

А Web Storage’ы могут хранить только строки.

Сериализация JavaScript объектов

Ответ прост –

У нас есть встроенный механизм для сериализации и десериализации любые объектов JavaScript’a в строки для удобного хранения их в различных хранилищах.

Формат для хранения такого рода данных называется JSON –

JavaScript Object Notation

(картинка для привлечения внимания)

JSON

JSON (англ. JavaScript Object Notation) — текстовый формат обмена данными, основанный на JavaScript. Но при этом формат независим от JS и может использоваться в любом языке программирования.

В качестве значений в JSON могут быть использованы:

• JSON-объект
• Массив
• Число (целое или вещественное)
• Литералы true, false и null
• Строка

Как устроен JSON

JSON-объект — это неупорядоченное(!) множество пар «ключ:значение».

Пары «ключ-значение» разделены запятыми.

Строки берем в кавычки.

Числа оставляем как есть.

Сериализация и десериализация

Возвращаясь к нашему вопросу, как же в итоге нам представлять наши данных в формате JSON ?

Ответ:

Существует глобальный объект JSON, доступный во всех современных браузерах, включает в себя два полезных метода для работы с данными: parse и stringify. ��JSON.parse(“{…}”) берет строку JSON и трансформирует ее в объект JavaScript. ��JSON.stringify(obj) берет объект JavaScript и трансформирует его в строку JSON.

Пример работы с массивами в LocalStorage

​

​

https://codepen.io/jasongutt/pen/oDkdq

​

https://codepen.io/tevko/pen/GgWYpg

(ITC)