Хранение информации на клиенте

1. Введение

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

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

2. Cookies

Классический способ хранения информации на клиенте - это использовать куки-файл размещенный на компьютере пользователя. Куки - это текстовые строки списка пар ключ=значение, разделенные точкой с запятой. Обычно куки приходят от сервера и позволяют хранить простые строчные данные.

Но у куки есть несколько ограничений.

• Они добавляются к каждому запросу на сервер, что может быть излишне

• Куки позволяют хранить всего до 4кб данных, что довольно мало

• Поскольку куки используются для отслеживания поведения людей в серфинге, пользователи часто отключают их, а сайты спрашивают каждый раз - нужно ли их устанавливать

• Используя куки, довольно проблематично отслеживать две или более транзакций на одном и том же сайте, что может происходить одновременно в разных вкладках

2.1. Дополнительные материалы

• What is a cookie?

• Follow the Cookie Trail - Computerphile

3. Web Storage API

Web Storage API — включает в себя локальное хранилище (localStorage), хранилище сеансов (sessionStorage) и предоставляет способ хранения пар ключ:значение более интуитивно понятным способом, чем использование куки. Данные в веб-хранилище, в отличие от куки, сохраняются даже при закрытии браузера или выключении компьютера.

Веб-хранилище - это часть HTML5-спецификации. Существует два варианта хранения данных:

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

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

3.1. localStorage

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

В localStorage не хранят методы объектов или функции, только данные.

Использование локального хранилища в современных браузерах очень просто и доступно через интерфейс window.localStorage.

3.2. Сохранение

localStorage.setItem(key, value)
Copy

Используя метод setItem можно записать пару ключ:значение.

localStorage.setItem('theme', 'light');
Copy

Одним из неприятных недостатков локального хранилища является то, что вы можете хранить только строки. Это означает, что когда есть объект, он не будет сохранен правильно. Это можно обойти, используя метод JSON.stringify, преобразовав объект в строку.

const settings = {
  theme: 'dark',
  isAuthenticated: true,
  options: [1, 2, 3],
};

localStorage.setItem('settings', JSON.stringify(settings));
Copy

3.3. Чтение

Чтение данных из локального хранилища — это тот же процесс, что и сохранение данных, но в обратном порядке.

localStorage.getItem(key)
Copy

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

const theme = localStorage.getItem('theme');
Copy

В противном случае, необходимо распарсить значение, чтобы вернуть исходный JavaScript-объект.

const settings = {
  theme: 'dark',
  isAuthenticated: true,
  options: [1, 2, 3],
};

localStorage.setItem('settings', JSON.stringify(settings));

const savedSettings = localStorage.getItem('settings');
const parsedSettings = JSON.parse(settingsFromLS);

console.log(parsedSettings);
Copy

3.4. Удаление

localStorage.removeItem(key)
Copy

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

localStorage.removeItem('theme');
Copy

3.5. Очистка хранилища

Если вы хотите полностью очистить хранилище, вызовите метод clear.

localStorage.clear();
Copy

3.6. Пример

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

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

Ссылка на пример в Codepen.io

Посмотреть содержимое localStorage можно в инструментах разработчика на вкладке Application.

ls

4. Модуль для localStorage

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

Напишем модуль для безопасной работы с localStorage, ведь при чтении или парсе данных для записи может произойти ошибка. Пишем две функции для записи и чтения, назовем их load и save.

В случае, если данные некорректны, JSON.parse() и JSON.stringify() генерируют ошибку, то есть скрипт «упадёт», поэтому при работе с JSON используем try..catch, чтобы обработать возможную ошибку и выводим error в консоль.

// storage.js

// Принимает ключ `key` по которому будет произведена выборка.
const load = key => {
  try {
    const serializedState = localStorage.getItem(key);

    return serializedState === null ? undefined : JSON.parse(serializedState);
  } catch (err) {
    console.error('Get state error: ', err);
  }
};

// Принимает ключ `key` и значение `value`.
const save = (key, value) => {
  try {
    const serializedState = JSON.stringify(value);
    localStorage.setItem(key, serializedState);
  } catch (err) {
    console.error('Set state error: ', err);
  }
};

export default { load, save };
Copy

Теперь мы можем безопасно записывать и читать localStorage. Попробуйте сами дописать метод remove, аналогично load и save.

5. IndexedDB

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

• Как и localStorage сохраняет пары ключ:значение

• В отличии от localStorage позволяет хранить сложные типы данных

• Это не реляционная база данных

• Имеет, в основном, асинхронный API на промисах

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

• Готовим IndexedDB

• Working with IndexedDB

• IndexedDB API на MDN

6. Дополнительные материалы

• Обзор средств хранения данных на стороне клиента