Техники JavaScript для локального хранения

Разработка JavaScript

Техники JavaScript для локального хранения

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

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

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

Простое хранилище ключей и значений

Возможно, вы уже знакомы с простыми доступными вариантами хранения значений ключей, которые называются localStorage и sessionStorage. Они обеспечивают простой способ хранения основных данных на стороне клиента, которые можно легко установить и прочитать с помощью простых вызовов JavaScript.

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

// Examples of using localStorage

// Store a value into localStorage
localStorage.setItem('key', 'value');

// Getting an items from localStorage
const storedValue = localStorage.getItem('key');

// Deleting a single item from localStorage
localStorage.removeItem('key');

// Deleting all data stored for the origin (domain) from localStorage
localStorage.clear();

Как видите, пользоваться им довольно просто. Недостатком является то, что он также хранит только простые значения, такие как текст, числа или логические значения. Более сложные данные, такие как объекты, должны быть преобразованы в строковый формат, такой как JSON, или сериализованы перед сохранением и после извлечения.

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

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

// Examples of using sessionStorage

// Store a value into sessionStorage
sessionStorage.setItem('key', 'value');

// Getting an items from sessionStorage
const storedValue = sessionStorage.getItem('key');

// Deleting a single item from sessionStorage
sessionStorage.removeItem('key');

// Deleting all data stored for the origin (domain) from sessionStorage
sessionStorage.clear();

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

ИндекседБД

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

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

Это транзакционная база данных, похожая на СУБД на основе SQL, но в отличие от них она не использует фиксированные таблицы и столбцы, а вместо этого представляет собой объектно-ориентированную базу данных на основе JavaScript.

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

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

По их собственным словам:

localForage — это библиотека JavaScript, которая улучшает работу вашего веб-приложения в автономном режиме за счет использования асинхронного хранилища данных с простым API, похожим на localStorage. Это позволяет разработчикам хранить множество типов данных, а не только строки.

localForage включает резервное хранилище с поддержкой localStorage для браузеров без поддержки IndexedDB или WebSQL. Асинхронное хранилище доступно в текущих версиях всех основных браузеров: Chrome, Firefox, IE и Safari (включая Safari Mobile).

localForage предлагает API обратного вызова, а также поддержку ES6 Promises API, так что вы можете использовать то, что предпочитаете.

Эта библиотека предоставляет инструмент, который не только дает вам простой доступ к возможностям IndexedDB, но и изящно возвращается к использованию localStorage, если по какой-то причине браузер клиента не поддерживает IndexedDB.

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

На веб-сайте есть инструкции по установке localForage для использования в вашем проекте, но после установки становится довольно просто использовать возможности indexedDB.

Хранение данных. Как вы можете видеть ниже, вы можете хранить больше, чем просто строки. Веб-сайт предоставляет список всех типов данных, которые можно хранить, включая массивы, объекты и большие двоичные объекты.

// Storing data in IndexedDB using localForage
// Examples copied from the localForage website (https://localforage.github.io/localForage/)

localforage.setItem('somekey', 'some value').then(function (value) {
    // Do other things once the value has been saved.
    console.log(value);
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

// Unlike localStorage, you can store non-strings.
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
    // This will output `1`.
    console.log(value[0]);
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

Получение данных. Это снова достаточно просто и может быть выполнено с помощью обратных вызовов, если это необходимо.

// Examples copied from localForage website (https://localforage.github.io/localForage/)

localforage.getItem('somekey').then(function(value) {
    // This code runs once the value has been loaded
    // from the offline store.
    console.log(value);
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

// Callback version:
localforage.getItem('somekey', function(err, value) {
    // Run this code once the value has been
    // loaded from the offline store.
    console.log(value);
});

// Or, use `async`/`await`:

try {
    const value = await localforage.getItem('somekey');
    // This code runs once the value has been loaded
    // from the offline store.
    console.log(value);
} catch (err) {
    // This code runs if there were any errors.
    console.log(err);
}

Вы также можете удалить отдельные элементы, а также очистить всю партию, аналогично тому, как вы можете это сделать с localStorage.

// Examples copied from localForage website (https://localforage.github.io/localForage/)

// Remove a single item
localforage.removeItem('somekey').then(function() {
    // Run this code once the key has been removed.
    console.log('Key is cleared!');
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});


// Clear all the data
localforage.clear().then(function() {
    // Run this code once the database has been entirely deleted.
    console.log('Database is now empty.');
}).catch(function(err) {
    // This code runs if there were any errors
    console.log(err);
});

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

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

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

Заключение

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

Удачного кодирования.