Клиентское хранилище в JavaScript

Что такое хранилище на стороне клиента?

Как следует из названия, хранилище на стороне клиента позволяет пользователю хранить данные на клиенте (т. Е. В браузере пользователя). И наоборот, серверное хранилище будет хранить данные на сервере (то есть во внешней базе данных).

Для получения дополнительной информации о разнице между клиентом и сервером ознакомьтесь с моей статьей Введение в внутреннее программирование.

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

Когда это полезно?

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

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

Типы клиентских хранилищ

1. Файлы cookie (не рекомендуется)

Вы, наверное, слышали о файлах cookie. Они представляют собой наиболее классический тип хранилища на стороне клиента и используются сайтами с первых дней существования Интернета.

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

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

Подробнее о проблемах безопасности файлов cookie читайте здесь.

Пример CRUD

//Create
document.cookie = "name=victoria";

//Read
console.log( document.cookie );

//Update
document.cookie = "name=victoria lo";

//Delete - Just set an expiry date that has passed
document.cookie = "name=victoria lo ; expires = Thu, 01 Jan 2010 00:00:00 GMT"

2. API веб-хранилища

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

В этом API есть 2 типа веб-хранилищ: Локальное хранилище и хранилище сеансов.

Локальное хранилище против хранилища сеансов

Следует отметить некоторые отчетливые различия между двумя типами веб-хранилищ.

CRUD Пример локального хранилища

// Create
const user = { first: 'Victoria', last: 'AAA' }
//store as a stringified JSON
localStorage.setItem('user', JSON.stringify(user));

// Read
console.log(JSON.parse(localStorage.getItem('user')))
//output will be a JSON: {first: "Victoria", last: "lo"}

// Update
const update = { first: 'Victoria', last: 'Lo'  }
localStorage.setItem('user', JSON.stringify(update));

// Delete
localStorage.removeItem('user');

CRUD Пример хранилища сеансов

Тот же синтаксис, что и в локальном хранилище, но замените localStorage на sessionStorage.

3. API IndexedDB

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

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

Пример CRUD

Сначала мы должны сделать запрос на открытие базы данных:

let openRequest = indexedDB.open('database', 1);
// users is the database name and 1 is the version

Затем мы можем добавить несколько методов ниже для выполнения операций:

openRequest.onupgradeneeded = function() {
  // triggers if the client had no database
  // ...perform initialization...
};
openRequest.onerror = function() {
  console.error("Error", openRequest.error);
};
openRequest.onsuccess = function() {
  let db = openRequest.result;
  // continue to work with database using db object
};

(Код из javascript.info/indexeddb)

Теперь давайте создадим хранилище объектов внутри метода onupgradeneeded:

let db = openRequest.result;
 // if there's no "users" store initialized, we create one
if (!db.objectStoreNames.contains('users')) {
       let objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement:true });
}

Для добавления данных в хранилище объектов IndexedDB API использует транзакции. Мы можем начать транзакцию для добавления / помещения данных в наше хранилище объектов «пользователей» с помощью:

// open a read/write transaction
let transaction = db.transaction("users", "readwrite"); 
// get the object store we want to operate on
let userStore = transaction.objectStore("users");
// add the data into the store
userStore.add({
        first: 'Victoria',
        last: 'Lo'
    });
// finish the transaction
transaction.oncomplete = function() {
  console.log("Transaction is complete");
};

Чтобы прочитать или удалить данные, просто выполните те же шаги транзакции, которые были показаны ранее, но на этот раз вместо добавления мы используем:

// Read
userStore.get('Victoria');
// Delete
userStore.delete('Victoria');

И в этом суть!

Спасибо, что прочитали это базовое введение в клиентское хранилище в JavaScript. Эти примеры служат только в качестве краткого обзора того, как работают эти различные типы хранилищ. Я рекомендую вам прочитать более подробную информацию по адресу:

• Javascript.info/indexeddb
• Developer.mozilla.org/en-US/docs/Learn/Java ..

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

Первоначально опубликовано на https://lo-victoria.com.

JavaScript на простом английском языке

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube в Decoded!