Средства хранения данных на клиентской стороне.

  1. 1. Куки
  2. 2. Локальное хранилище
  3. 3. Сессионное хранилище
  4. 4. IndexedDB

Куки

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

1
2
3
4
document.cookie = "user_name=Ire Aderinokun";
document.cookie = "user_age=25;max-age=31536000;secure";
console.log( document.cookie );
document.cookie = "user_age=24;max-age=31536000;secure";

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

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

Недостатки куки

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

Локальное хранилище

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

1
2
3
const user = { name: 'Ire Aderinokun', age: 25 }
localStorage.setItem('user', JSON.stringify(user));
console.log( JSON.parse(localStorage.getItem('user')) )

Преимущества локального хранилища

  • Предлагает более простой и интуитивный интерфейс хранения данных .
  • Более безопасно для хранения данных на клиенте.
  • Позволяет хранить больше данных (все 3 пункта — в сравнении с куки).

Недостатки локального хранилища

  • Позволяет хранить только строки

Сессионное хранилище

Сессионное хранилище это вторая разновидность Web Storage API. Оно точно такое же как и локальное хранилище за исключением того, что данные хранятся только для сессии вкладки браузера.

1
2
3
const user = { name: 'Ire Aderinokun', age: 25 }
sessionStorage.setItem('user', JSON.stringify(user));
console.log( JSON.parse(sessionStorage.getItem('user')) )

Достоинства, недостатки и поддержка в браузерах точно такие же как и у локального хранилища.

IndexedDB

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function OpenIDB() {
return idb.open('SampleDB', 1, function(upgradeDb) {
const users = upgradeDb.createObjectStore('users', {
keyPath: 'name'
});
});
}
OpenIDB().then((db) => {
const dbStore = 'users';
const transaction = db.transaction(dbStore, 'readwrite');
const store = transaction.objectStore(dbStore);
store.put({
name: 'Ire Aderinokun',
age: 25
});
return transaction.complete;
});

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

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

Недостатки IndexedDB

  • Более сложное по сравнению с Web Storage API.

Изночальная статья: http://prgssr.ru/development/obzor-sredstv-hraneniya-dannyh-na-klientskoj-storone.html