This article introduces some interesting, fun, and useful open source libraries related to front-end data storage. In addition, it will also give you a grasp of the characteristics of various Web storage solutions.

Before introducing some popular open source front-end storage solutions, Po brother shares some interesting open source libraries related to storage.

❝

Read last week’s top posts on Arbog (thanks to Digg for your support 🌹🌹🌹) :

  • 1.2 W word | great TypeScript introductory tutorial (1027 + 👍)
  • Top 10 TS Projects (650+ 👍)
  • Understanding TypeScript generics and applications (7.8K words)

❞

Interesting open source libraries

1.1 Sharedb

❝

Realtime Database Backend Based on Operational Transformation (OT).

https://github.com/share/sharedb

❞

ShareDB is a real-time database backend based on JSON document Manipulation transformations (OT). It is the real-time back end of the DerbyJS Web application framework.

“Example 1: Real-time data synchronization“


“Example 2: A leaderboard application that shows real-time queries“


1.2 ImmortalDB

❝

🔩 A Relentless Key-value Store for the browser.

https://github.com/gruns/ImmortalDB

❞

ImmortalDB is the best way to store persistent key-value data in a browser. Data saved to ImmortalDB is redundantly stored in Cookies, IndexedDB, and localStorage, and is constantly self-healing if any of it is deleted or corrupted.

For example, clearing cookies is a common user action, even for non-technical users. Under storage pressure, browsers delete IndexedDB, localStorage, or sessionStorage at will without warning.

“The sample“

import { ImmortalDB } from 'immortal-db'

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

1.3 web-storage-cache

❝

LocalStorage and sessionStorage have been extended to add timeout, serialization methods.

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

❞

WebStorageCache extends HTML5 localStorage and sessionStorage, “adding timeout, serialization method”. JSON objects can be stored directly, and the timeout period can be set very easily.

❝

Optimization: WebStorageCache automatically clears expired data, avoiding the accumulation of expired data. It also provides a method to clear all expired data: wscache.deleteAllexpires ();

❞

“The sample“

var wsCache = new WebStorageCache();

// Cache the string 'wqteam' into 'username' with a timeout of 100 seconds
wsCache.set('username'.'wqteam', {exp : 100});

// The expiration Date of the timeout can be the Date type var nextYear = new Date(a);nextYear.setFullYear(nextYear.getFullYear() + 1); wsCache.set('username'.'wqteam', {exp : nextYear});  // Get the value of 'username' in the cache wsCache.get('username');  // Cache simple JS objects using the serialization method json.stringify by default. Serializer. Serialize can be configured when wsCache is initialized wsCache.set('user', { name: 'Wu'.organization: 'wqteam'}); Copy the code

1.4 lz-string

❝

Lz-based Compression Algorithm for JavaScript.

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

❞

Lz-string is designed to meet the need to store large amounts of data in localStorage, especially on mobile devices. LocalStorage is usually limited to 5MB to 10MB. You can compress the data to store more data.

“The sample“

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); Copy the code

Here is the result of a string compression test using the official online example:


(photo: https://pieroxy.net/blog/pages/lz-string/demo.html)

Let’s start by introducing some of the major databases.

Two, the mainstream database

2.1 localForage

❝

💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

https://github.com/localForage/localForage

❞

LocalForage is a fast and easy JavaScript repository. It improves the offline experience of your Web applications by using a simple API similar to localStorage to use asynchronous storage (IndexedDB or WebSQL).

For browsers that do not support IndexedDB or WebSQL, localForage uses localStorage for data storage. In addition, localForage supports storing all native JS objects that can be serialized into JSON, as well as ArrayBuffers, Blob, and TypedArrays.

Forage main supported platforms:

  • IE 10 (IE 8+ localStorage)
  • Opera 10.5+ localStorage
  • Firefox 18
  • Safari 3.1 (including Mobile Safari)
  • Chrome 23, Chrome for Android 32
  • Phonegap/Apache Cordova 1.2.0

2.2 PouchDB

❝

🐨 – PouchDB is a pocket-sized database.

https://github.com/pouchdb/pouchdb

❞

PouchDB is an in-browser database that allows the application to save data locally so that the user can enjoy all the functionality of the application even when offline. In addition, data is synchronized between clients, so users can stay up to date wherever they want.

PouchDB also runs in Node.js and can be used as a direct interface to “CouchDB-compatible” servers. The API works the same in every environment, so you can spend less time worrying about browser differences and more time writing clean, consistent code.

PouchDB supports all modern browsers:

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

PouchDB uses IndexedDB behind the scenes, and falls back to Web SQL if the current environment does not support IndexedDB.

2.3 Rxdb

❝

💻 🔄 📱 A realtime Database for JavaScript Applications.

https://github.com/pubkey/rxdb

❞

RxDB (Reactive Database) is a NoSQL Database used in JavaScript applications such as Websites, hybrid applications, Electron Apps, Progressive Web Apps and Node.js. Reactive means that you can not only query the current state, but subscribe to all state changes, such as the results of the query or individual fields of a document.


This is very useful for uI-based real-time applications because it is easy to develop and has great performance advantages. To replicate data between client and server, RxDB provides modules for real-time replication with any CouchDB-compatible endpoints as well as custom GraphQL endpoints.

RxDB supports the following features:

  • Mango-query: Supports the MQuery API to get data from collections and supports the chained mongoDB Query style.
  • Replication: Because RxDB relies on PouchDB, it is easy to synchronize data between terminal devices and servers.
  • Reactive: RxDB makes it easy to synchronize DOM state.
  • MultiWindow/Tab: When two instances of RxDB use the same storage engine, their state and operation flow will be broadcast. This means that for both browser Windows, data changes for window #1 will automatically affect the data state for window #2 as well.
  • Schema: Schemas are defined with jsonschema, which describe data formats.
  • Encryption: By setting the mode field to encrypted, the value of the field will be stored in encrypted mode and cannot be read without a password.

2.4 NeDB

❝

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

https://github.com/louischatriot/nedb

❞

NeDB is a JavaScript database that can run in Node.js, Nw.js, Electron, and browser environments. It is implemented using pure JavaScript, does not rely on other libraries, provides a subset of the MongoDB API, and is very fast:

  • Insert: 10,680 ops/s

  • Find: 43,290 ops/s

  • Update: 8,000 ops/s.

  • Deleted: 11,750 ops/s.

Operation per second (OPS) indicates the number of operations performed per second.

2.5 Dexie.js

❝

A Minimalistic Wrapper for IndexedDB.

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

❞

Dexie.js is a wrapper around IndexedDB. It provides a well-designed API, powerful error handling, extensibility, and the ability to track data changes, KeyRange (search is case-insensitive, and you can set the matching method and THE OR operation).

Dexie.js addresses three major issues with the native IndexedDB API:

  • Exception error handling.
  • Weak query function.
  • Code complexity.

In order to facilitate developers to access Dexie.js, the website of Dexie.js provides rich examples:

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

The above list only partial sample for more sample please visit: Dexie. Js – Samples (https://dexie.org/docs/Samples). Finally, let’s take a brief look at the various Web storage solutions.

3. Introduction to various Web storage solutions

3.1 the Cookie

An HTTP Cookie (also known as a Web Cookie or browser Cookie) is a small piece of data that a server sends to a user’s browser and keeps locally. It is carried and sent to the server the next time the browser makes a request to the same server. Typically, it is used to tell the server whether two requests are from the same browser, such as to keep the user logged in.

Cookies are mainly used for the following three aspects:

  • Session state management (such as user login status, shopping cart, game score, or other information that needs to be recorded);
  • Personalized Settings (such as user – defined Settings, themes, etc.);
  • Browser behavior tracking (e.g. tracking and analyzing user behavior, etc.)

Cookie features:

  • Cookie size is limited, typically 4 KB;
  • The number of cookies stored in the same domain name is limited. The number varies with different browsers. Generally, the number is 20.
  • Cookie supports setting the expiration time and is automatically destroyed when it expires.
  • Each TIME an HTTP request is initiated in the same domain, the Cookie under the current domain name is carried.
  • Support setting toHttpOnlyTo prevent cookies from being accessed by the client’s JavaScript.

“Example 1: Simple usage“

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

alert(document.cookie);
// Display: name=semlinker; favorite_food=tripe
Copy the code

“Example 2: Get a cookie named test2“

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

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

3.2 localStorage

A persistent storage mode, meaning that data will never expire unless it is manually cleaned up. It uses key-value pair to store data and saves the data to the corresponding database file according to the domain name. It can hold much more data than a Cookie.

LocalStorage features:

  • The size is limited to 5MB to 10MB.
  • Sharing data between all tabs and Windows of the same origin;
  • Data is only stored in the client and does not communicate with the server.
  • Data persists and does not expire. The data persists after the browser is restarted.
  • Operations on data are synchronous.

“The sample“

// Add a data item with setItem()
localStorage.setItem('myName'.'Semlinker');

// Get an item from getItem()
let me = localStorage.getItem('myName');
 // Remove an item by removeItem() localStorage.removeItem('myName');  // Remove all data items localStorage.clear(); Copy the code

3.3 sessionStorage

Similar to session on the server, sessionStorage is a session-level cache that is cleared when the browser is closed. Note that the scope of sessionStorage is window level, that is, sessionStorage data stored between different Windows cannot be shared.

SessionStorage features:

  • SessionStorage data only exists in the current browser TAB;
  • The data remains after the page is refreshed, but is erased when the browser TAB is closed;
  • Has a unified API interface with localStorage;
  • Operations on data are synchronous.

“The sample“

// Add a data item with setItem()
sessionStorage.setItem('myName'.'Semlinker');

// Get an item from getItem()
let me = sessionStorage.getItem('myName');
 // Remove an item by removeItem() sessionStorage.removeItem('myName');  // Remove all data items sessionStorage.clear(); Copy the code

3.4 Web SQL

The Web SQL database API is not actually part of the HTML5 specification, but rather a separate specification that introduces a set of apis to manipulate client databases using SQL. Note that HTML5 has abandoned Web SQL databases.

The three core methods defined in the Web SQL Database specification:

  • OpenDatabase: This method uses an existing database or a new database to create database objects;

  • Transaction: This method allows us to control the commit or rollback of a transaction depending on the situation;

  • ExecuteSql: This method is used to execute real SQL statements.

Web SQL features (compared to Cookies, localStorage, and sessionStorage) :

  • Web SQL can facilitate object storage.
  • Web SQL supports transactions, making it easy to query data and process data.

“The sample“

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

db.transaction(function (tx) { 
   // Perform query operations
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); 
 // Perform the insert operation  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); }); Copy the code

3.5 with IndexedDB

IndexedDB is an underlying API used by clients to store large amounts of structured data, including files and binary large objects. The API uses indexes to enable a high-performance search of this data. While Web Storage is useful for storing smaller amounts of data, this approach is less useful for storing larger amounts of structured data. IndexedDB provides a solution.

IndexedDB features:

  • Large storage space: storage space can reach hundreds of megabytes or more;
  • Binary storage support: it can store not only strings, but also binary data;
  • IndexedDB has the same origin restriction. Each database can only be accessed under its own domain name, not across domain names.
  • Transactional support: The operations performed by IndexedDB are grouped by transaction. In a transaction, either all operations succeed or all operations fail.
  • Key-value pair storage: IndexedDB uses an object Store internally to store data. All types of data can be stored directly, including JavaScript objects. In the object warehouse, data is stored as “key-value pairs”, and each data record has a corresponding primary key. The primary key is unique and cannot be duplicated, otherwise an error will be thrown.
  • Data operations are asynchronous: Operations performed with IndexedDB are performed asynchronously so as not to block applications.

“The sample“

var dbName = "my_db";

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

request.onerror = function(event) {
 // Error handling };  request.onupgradeneeded = function(event) {  var db = event.target.result;   // Create an object repository to store information about our customers. We select SSN as the key path.  // Because SSN is guaranteed not to be duplicated  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });   // Create an index to search customers by name. The names may be duplicated, so we cannot use the unique index  objectStore.createIndex("name"."name", { unique: false });   // We make sure that the email addresses of the clients are not duplicated, so we use unique index  objectStore.createIndex("email"."email", { unique: true });   // Use the transaction's onComplete event to ensure that the object repository is created before data is inserted  objectStore.transaction.oncomplete = function(event) {  // Save the data to the newly created object repository  var customerObjectStore = db.transaction("customers"."readwrite").objectStore("customers");  customerData.forEach(function(customer) {  customerObjectStore.add(customer);  });  }; }; Copy the code

There are other mature open source libraries, such as LOWDB (Local JSON Database), Lovefield (Relational Database), and LokiJS (NoSQL Database). If you know of any other fun projects, feel free to leave a comment.

Iv. Reference resources

  • w3.org – webstorage
  • wiki – Web_storage

This article is formatted using MDNICE