Overview of the client (browser-side) data storage technology

There are many benefits to storing data on the client (browser side), the most important one being the ability to quickly access (Web page) data. There are five methods of data storage on the client side, and there are currently only four common methods (one of which is deprecated):

• Cookies
• Local Storage
• Session Storage
• Indexeddb
• Websql (abandoned)

Cookies

Cookies are one of the most typical ways to store string data within a document. In general, cookies are sent to the client by the server, stored by the client, and then sent back to the server in subsequent requests. This can be used for things like managing user sessions, tracking user information, and more.

In addition, clients use cookies to store data. As a result, cookies are often used to store generic data, such as user preference settings.

Basic CRUD operation of Cookies

With the following syntax, we can create, read, update and delete cookies:

Create Document.cookie = "User_name=ire Aderinokun"; Document.cookie = "User_age=25;max-age=31536000;secure"; Read (All) Console.log (Document.cookie); Update Document.cookie = "User_age=24;max-age=31536000;secure"; Delete Document.cookie = "User_name=ire aderinokun;expires=thu, 1970 00:00:01 GMT";

The advantages of Cookies

• Can be used to communicate with the service side
• When the cookie is about to expire automatically, we can reset it instead of deleting it.

The disadvantage of Cookies

• Increased load on document transfer
• Only a small amount of data can be stored
• Only strings can be stored
• Potential security issues
• Cookies are no longer recommended for storing data since there is a Web Storage API (Local and session Storage).

Browser support

Cookies are supported by all major browsers.

Local Storage

The local Storage is a type of Web Storage API that stores key-value pairs of data on the browser side. Local Storage provides a more intuitive and secure API for storing simple data, and is considered a solution to replace Cookies.

Technically, although the local Storage can only store strings, it can also store strings of JSON data. This means that local Storage can store more complex data than Cookies.

Basic CRUD operations for local Storage

With the following syntax, we can create, read, update, and delete local Storage:

Create Const USER = {name: ' Ire aderinokun ', age:25} Localstorage.setitem (' User ', json.stringify (user)); Read (Single) Console.log (Json.parse) (Localstorage.getitem (' user ')) Update Const Updateduser = {name: ' Ire aderinokun ', age:24} Localstorage.setitem (' User ', Json.stringify (Updateduser)); Delete Localstorage.removeitem (' user ');

Advantages of local Storage

Compared to cookies:

• It provides a more intuitive interface for storing data
• More secure
• can store more data

Disadvantages of local Storage

• Only string data can be stored

Browser support

Ie8+/edge/firefox 2+/chrome/safari 4+/opera 11.5+ (caniuse)

Session Storage

Session Storage is another type of Web Storage API. Very similar to local Storage, the difference is that session Storage stores only the data for the current Conversation page (tab), and once the user closes the current page or browser, the data is automatically erased.

Basic CRUD Operations for session Storage

With the following syntax, we can create, read, update, and delete session Storage:

Create Const USER = {name: ' Ire aderinokun ', age:25} Sessionstorage.setitem (' User ', json.stringify (user)); Read (Single) Console.log (Json.parse) (Sessionstorage.getitem (' user ')) Update Const Updateduser = {name: ' Ire aderinokun ', age:24} Sessionstorage.setitem (' User ', Json.stringify (Updateduser)); Delete Sessionstorage.removeitem (' user ');

Pros, cons, and browser support

Like the local Storage

Indexeddb

INDEXEDDB is a more complex and comprehensive client data storage scenario that is based on JavaScript, object-oriented, and database, makes it easy to store data, and retrieves data that has been established for keyword indexing.

In building an incremental Web application, I've covered how to use INDEXEDDB to create an offline-first application.

Basic CRUD operations for INDEXEDDB

Note: In the example, I used the INDEXEDDB promised library of Jake's Archibald, which provides a Promise-style indexeddb method

Using INDEXEDDB to store data on the browser side is more complex than the other methods described above. Before we can create/read/update/delete any data, we first need to open the database and create the stores we need (similar to creating a table in the database).

function Openidb () { Return Idb.open (' SampleDb ', 1, function (upgradedb) { Const users = Upgradedb.createobjectstore (' users ', { KeyPath: ' Name ' }); }); }

To create or update data in the store:

1. Open up the database OPENIDB (). Then (db) => { Const Dbstore = ' users '; 2. Open a new Read/write transaction with the store within the database Const TRANSACTION = db.transaction (Dbstore, ' readwrite '); Const STORE = Transaction.objectstore (Dbstore); 3. ADD the data to the store Store.put ({ Name: ' Ire Aderinokun ', Age:25 }); 4. Complete the transaction return transaction.complete; });

Retrieving data:

1. Open up the database OPENIDB (). Then (db) => { Const Dbstore = ' users '; 2. Open a new read-only transaction with the store within the database Const TRANSACTION = db.transaction (Dbstore); Const STORE = Transaction.objectstore (Dbstore); 3. Return the data Return Store.get (' Ire aderinokun '); }). Then ((item) => { Console.log (item); })

Delete data:

1. Open up the database OPENIDB (). Then (db) => { Const Dbstore = ' users '; 2. Open a new Read/write transaction with the store within the database Const TRANSACTION = db.transaction (Dbstore, ' readwrite '); Const STORE = Transaction.objectstore (Dbstore); 3. Delete the data corresponding to the passed key Store.delete (' Ire aderinokun '); 4. Complete the transaction return transaction.complete; })

If you are interested in learning more about INDEXEDDB use, you can read my article about how to use Indexedd in progressive Web applications (PWA).

Advantages of INDEXEDDB

• Ability to handle more complex and structured data
• There can be multiple ' databases ' and ' tables ' in each ' database '
• Greater storage space
• Have more interactive control over it

The disadvantage of INDEXEDDB

• More difficult to apply than Web Storage APIs

Browser support

Ie10+/edge12+/firefox 4+/chrome 11+/safari 7.1+/opera 15+ (caniuse)

Contrast

Feature	Cookies	Local Storage	Session Storage	Indexeddb
Storage Limit	~4kb	~5mb	~5mb	Up to half of hard drive
Persistent Data?	Yes	Yes	No	Yes
Data Value Type	String	String	String	Any structured data
Indexable?	No	No	No	Yes