Что еще есть во внешнем хранилище, кроме localStorage?

внешний интерфейс JavaScript
Что еще есть во внешнем хранилище, кроме localStorage?

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

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

❝

Прочтите популярную на прошлой неделе статью Brother A Bao (благодаря ободрению и поддержке Digyou 🌹🌹🌹):

❞

1. Интересная и забавная библиотека с открытым исходным кодом

1.1 Sharedb

❝

База данных реального времени на основе Operational Transformation (OT).

https://github.com/share/sharedb

❞

ShareDB— это серверная часть базы данных в реальном времени, основанная на преобразовании манипулирования документами JSON (OT). этоDerbyJS WebСерверная часть реального времени для фреймворков приложений.

"Пример 1: Синхронизация данных в реальном времени"

"Пример 2. Приложение Leaderboard, показывающее запрос в реальном времени"

1.2 ImmortalDB

❝

🔩 Постоянное хранилище ключей и значений для браузера.

https://github.com/gruns/ImmortalDB

❞

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

Например, очистка файлов cookie — обычное действие пользователя, даже для нетехнических пользователей. Из-за нехватки памяти браузеры произвольно удаляют IndexedDB, localStorage или sessionStorage без предупреждения.

"Пример"

import { ImmortalDB } from 'immortal-db'

await ImmortalDB.set('name', 'semlinker'); // Set
await ImmortalDB.get('name', default='lolo'); // Get
await ImmortalDB.remove('name'); // Remove

1.3 web-storage-cache

❝

Расширены localStorage и sessionStorage, добавлен таймаут, метод сериализации.

https://github.com/wuchangming/web-storage-cache

❞

WebStorageCacheРасширения для HTML5 localStorage и sessionStorage,"Добавлен таймаут, метод сериализации". Объекты JSON можно сохранять напрямую, а период тайм-аута можно установить очень просто.

❝

Оптимизация: WebStorageCache автоматически очищает доступ к просроченным данным, избегая накопления просроченных данных. Кроме того, также предоставляется метод очистки всех просроченных данных: wsCache.deleteAllExpires();

❞

"Пример"

var wsCache = new WebStorageCache();

// 缓存字符串'wqteam' 到 'username' 中, 超时时间100秒
wsCache.set('username', 'wqteam', {exp : 100});

// 超时截止日期，可用使用Date类型
var nextYear = new Date();
nextYear.setFullYear(nextYear.getFullYear() + 1);
wsCache.set('username', 'wqteam', {exp : nextYear});

// 获取缓存中 'username' 的值
wsCache.get('username');

// 缓存简单js对象，默认使用序列化方法为JSON.stringify。
// 可以通过初始化wsCache的时候配置serializer.serialize
wsCache.set('user', { name: 'Wu', organization: 'wqteam'});

1.4 lz-string

❝

Алгоритм сжатия на основе LZ для JavaScript.

https://github.com/pieroxy/lz-string/

❞

lz-stringРазработан для удовлетворения потребностей хранения больших объемов данных в localStorage, особенно на мобильных устройствах. localStorage обычно ограничен 5 МБ ~ 10 МБ, вы можете сжать данные, чтобы хранить больше данных.

"Пример"

var string = "Hello, my name is semlinker";
console.log("Size of sample is: " + string.length);

var compressed = LZString.compress(string);
console.log("Size of compressed sample is: " + compressed.length);

string = LZString.decompress(compressed);
console.log("Sample is: " + string);

На картинке ниже используется официальныйОнлайн-примерРезультаты выполнения теста на сжатие струны:

(Источник изображения: https://pieroxy.net/blog/pages/lz-string/demo.html)

Далее мы начнем знакомить с некоторыми основными базами данных.

Во-вторых, основная база данных

2.1 localForage

❝

💾 Улучшенное автономное хранилище. Обертывает IndexedDB, WebSQL или localStorage с помощью простого, но мощного API.

https://github.com/localForage/localForage

❞

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

Для браузеров, не поддерживающих IndexedDB или WebSQL, localForage использует localStorage для хранения данных. Кроме того, localForage поддерживает хранение всех собственных объектов JS, которые могут быть сериализованы в JSON, а также ArrayBuffers, Blob и TypedArrays.

Основные платформы, поддерживаемые localForage:

  • IE 10 (IE 8+ использует localStorage)
  • Opera 15 (Opera 10.5+ использует localStorage)
  • Firefox 18
  • Safari 3.1 (включая мобильное Safari)
  • Chrome 23, Chrome для Android 32
  • Phonegap/Apache Cordova 1.2.0

2.2 PouchDB

❝

🐨 — PouchDB — это карманная база данных.

https://github.com/pouchdb/pouchdb

❞

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

PouchDB также работает в Node.js и может использоваться с"CouchDB"Прямой интерфейс к совместимым серверам. API работает одинаково во всех средах, поэтому вы можете тратить меньше времени на беспокойство о различиях браузеров и больше времени на написание чистого, согласованного кода.

PouchDB поддерживает все современные браузеры:

  • Firefox 29+ (Including Firefox OS and Firefox for Android)
  • Chrome 30+
  • Safari 5+
  • Internet Explorer 10+
  • Opera 21+
  • Android 4.0+
  • iOS 7.1+
  • Windows Phone 8+

PouchDB использует IndexedDB за кулисами и возвращается к Web SQL, если текущая среда не поддерживает IndexedDB.

2.3 Rxdb

❝

💻 🔄 📱 База данных реального времени для приложений JavaScript.

https://github.com/pubkey/rxdb

❞

RxDB (сокращение от Reactive Database) — это база данных NoSQL, используемая в приложениях JavaScript, таких как веб-сайты, гибридные приложения, приложения Electron, прогрессивные веб-приложения и Node.js. Реактивный означает, что вы можете не только запрашивать текущее состояние, но и подписываться на все изменения состояния, такие как результат запроса или отдельное поле документа.

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

RxDB поддерживает следующие функции:

  • Mango-Query: поддержка API mquery для получения данных из коллекции, поддержка стиля запросов mongoDB с цепочкой.
  • Репликация: поскольку RxDB опирается на PouchDB, данные между конечными устройствами и серверами легко синхронизировать.
  • Реактивный: RxDB упрощает синхронизацию состояния DOM.
  • MultiWindow/Tab: Когда два экземпляра RxDB используют один и тот же механизм хранения, их состояние и рабочие потоки будут транслироваться. Это означает, что для обоих окон браузера изменения данных в окне №1 также автоматически влияют на состояние данных в окне №2.
  • Схема: пройтиjsonschemaдля определения схем, описывающих форматы данных.
  • Шифрование: при установке в поле режима зашифрованного значение этого поля будет храниться в зашифрованном режиме и не может быть прочитано без пароля.

2.4 NeDB

❝

The JavaScript Database, for Node.js, nw.js, electron and the browser.

https://github.com/louischatriot/nedb

❞

NeDB— это база данных JavaScript, которая может работать в среде Node.js, nw.js, Electron и браузера. Он реализован на чистом JavaScript, не зависит от других библиотек, предоставляемый API является подмножеством API MongoDB, и важно то, что он очень быстрый:

  • Вставка: 10 680 операций/с

  • Поиск: 43 290 операций/с

  • Обновление: 8000 опс/с.

  • Удаления: 11 750 операций/с.

ops (операций в секунду) означает количество операций в секунду.

2.5 Dexie.js

❝

A Minimalistic Wrapper for IndexedDB.

https://github.com/dfahlander/Dexie.js

❞

Dexie.jsЭто библиотека-оболочка IndexedDB, она предоставляет набор хорошо разработанных API, мощную обработку ошибок, сильную расширяемость, кроме того, она может отслеживать изменения данных, поддерживает KeyRange (поиск без учета регистра, режим сопоставления и операция ИЛИ).

Dexie.js в основном предназначен для решения трех основных проблем в собственном API IndexedDB:

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

Чтобы облегчить разработчикам доступ к Dexie.js, на официальном сайте Dexie.js представлено множество примеров:

  • React + Dexie
  • React + Redux + Dexie
  • Dexie with Typescript
  • Angular + Dexie
  • Dexie with Electron
  • Full Text Search

Выше перечислены лишь некоторые примеры. Дополнительные примеры см. на странице:Dexie.js - Samples(https://dexie.org/docs/Samples). Наконец, давайте кратко представим различные решения для веб-хранилищ.

3. Знакомство с различными решениями для веб-хранилищ

3.1 Cookie

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

Файлы cookie в основном используются для следующих трех аспектов:

  • Управление состоянием сеанса (например, статус входа пользователя, корзина покупок, счет игры или другая информация, которую необходимо записать);
  • Настройки персонализации (такие как пользовательские настройки, темы и т. д.);
  • Отслеживание поведения в браузере (например, отслеживание и анализ поведения пользователей и т. д.).

Особенности файлов cookie:

  • Файлы cookie имеют ограниченный размер, обычно 4 КБ;
  • Количество файлов cookie, хранящихся под одним и тем же доменным именем, ограничено, количество разных браузеров разное, обычно 20;
  • Cookie поддерживает настройку времени истечения срока действия, и он будет автоматически уничтожен по истечении срока его действия;
  • Каждый раз, когда инициируется HTTP-запрос в одном и том же домене, будет передаваться файл cookie с текущим доменным именем;
  • Поддержка настроена наHttpOnly, чтобы предотвратить доступ к файлам cookie клиентским JavaScript.

"Пример 1: Простое использование"

document.cookie = "name=semlinker";
document.cookie = "favorite_food=tripe";

alert(document.cookie);
// 显示: name=semlinker;favorite_food=tripe

"Пример 2: Получить файл cookie с именем test2"

document.cookie = "test1=Hello";
document.cookie = "test2=World";

var myCookie = document.cookie
    .replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
alert(myCookie);

3.2 localStorage

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

Особенности локального хранилища:

  • Размер ограничен 5 МБ ~ 10 МБ;
  • обмениваться данными между всеми вкладками и окнами одного происхождения;
  • Данные хранятся только на стороне клиента и не обмениваются данными с сервером;
  • Данные являются постоянными и не имеют срока действия, и они все еще существуют после перезапуска браузера;
  • Операции с данными синхронны.

"Пример"

// 通过setItem()增加一个数据项
localStorage.setItem('myName', 'Semlinker');

// 通过getItem()获取某个数据项
let me = localStorage.getItem('myName');

// 通过removeItem()移除某个数据项
localStorage.removeItem('myName');

// 移除所有数据项
localStorage.clear();

3.3 sessionStorage

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

Особенности сеансового хранилища:

  • Данные sessionStorage существуют только на текущей вкладке браузера;
  • Данные сохраняются после обновления страницы, но удаляются при закрытии вкладки браузера;
  • Иметь единый интерфейс API с localStorage;
  • Операции с данными синхронны.

"Пример"

// 通过setItem()增加一个数据项
sessionStorage.setItem('myName', 'Semlinker');

// 通过getItem()获取某个数据项
let me = sessionStorage.getItem('myName');

// 通过removeItem()移除某个数据项
sessionStorage.removeItem('myName');

// 移除所有数据项
sessionStorage.clear();

3.4 Web SQL

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

Три основных метода, определенные в спецификации базы данных Web SQL:

  • openDatabase: этот метод использует существующую базу данных или новую базу данных для создания объекта базы данных;

  • транзакция: этот метод позволяет нам контролировать фиксацию или откат транзакции в зависимости от ситуации;

  • executeSql: этот метод используется для выполнения настоящего оператора SQL.

Особенности Web SQL (по сравнению с файлами cookie, localStorage и sessionStorage):

  • Web SQL может упростить хранение объектов;
  • Web SQL поддерживает транзакции, которые могут упростить операции запроса и обработки данных.

"Пример"

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) { 
   // 执行查询操作
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
   // 执行插入操作
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

3.5 IndexedDB

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

Возможности IndexedDB:

  • Большой объем памяти: объем памяти может достигать сотен мегабайт и более;
  • Поддержка бинарного хранилища: оно может хранить не только строки, но и бинарные данные;
  • IndexedDB имеет такое же ограничение по происхождению: к каждой базе данных можно получить доступ только под своим собственным доменным именем и нельзя получить доступ к другим доменным именам;
  • Поддержка транзакций: операции, выполняемые IndexedDB, сгруппированы в соответствии с транзакциями.В транзакции либо все операции выполняются успешно, либо все операции завершаются неудачей;
  • Хранение пары ключ-значение: IndexedDB использует хранилище объектов для внутреннего хранения данных. Все типы данных могут храниться напрямую, включая объекты JavaScript. В хранилище объектов данные хранятся в виде "пар ключ-значение". Каждой записи данных соответствует первичный ключ. Первичный ключ уникален и не может повторяться, иначе будет выдана ошибка.
  • Операции с данными являются асинхронными: операции, выполняемые с IndexedDB, выполняются асинхронно, чтобы не блокировать приложение.

"Пример"

var dbName = "my_db";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // 错误处理
};

request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // 建立一个对象仓库来存储我们客户的相关信息，我们选择 ssn 作为键路径（key path）
  // 因为 ssn 可以保证是不重复的
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // 建立一个索引来通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引
  objectStore.createIndex("name", "name", { unique: false });

  // 使用邮箱建立索引，我们确保客户的邮箱不会重复，所以我们使用 unique 索引
  objectStore.createIndex("email", "email", { unique: true });

  // 使用事务的 oncomplete 事件确保在插入数据前对象仓库已经创建完毕
  objectStore.transaction.oncomplete = function(event) {
    // 将数据保存到新创建的对象仓库
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerData.forEach(function(customer) {
      customerObjectStore.add(customer);
    });
  };
};

Из-за ограниченного места мы представляем только некоторые библиотеки с открытым исходным кодом.На самом деле, есть некоторые другие зрелые библиотеки с открытым исходным кодом, такие как lowdb (локальная база данных JSON), Lovefield (реляционная база данных) и LokiJS (база данных NoSQL) и т. д. Если вы знаете другие интересные проекты, добро пожаловать, чтобы оставить сообщение.

4. Справочные ресурсы

В этой статье используетсяmdniceнабор текста

Категории