Network Storage: simpler and more powerful client-side Data Storage

Introduction

With the complex application of Javascript and the coming standard and technology, web applications are becoming more and more advanced. We constantly rely on these applications, most of which have become part of our daily lives. In Web application development, one field has been lacking-the ability of the customer to store data. This is still the case till now.

Network storage is a W3c specification that provides the ability to store data on the customer end until the last session (Session storage) or local storage. This is far more powerful than traditional cookies and is easier to operate. In this article, we will learn about it and learn to use it.

Current problem: cookie is too bad

Before proceeding, let's make a brief review of the current method of cookie storing data on the client. It has the following problems:

• Low capacity: Generally, the maximum cookie capacity is about 4 kb, which is far from enough to store any type of complex data;
• On the same site, it is difficult to use cookies to track two or more transactions, which usually occurs when two or more different tags are opened;
• Cookie can be detected using cross-site scripting technology, which may cause Security Vulnerabilities

Other uncommon cookie-related technologies include query strings, hidden form fields, and Flash-based local shared objects. Each of them involves security, ease of use, and size restrictions. So till now, we have been using a very bad way to store data on the client. We need a better way to accomplish this. This is the application of network storage.

Network Storage

W3C network storage specifications design a better way to store data on the client. It has two different storage types: Session storage and local storage.

These two storage methods can store about 5 MB of data in each domain, which is much more than Cookie. As we will see, we will have a better understanding of them and understand what makes network storage the best storage mechanism.

Session Storage

Session storage has only one purpose: Remember all the data in your session and forget it as soon as you close the tab (or window.

Set and retrieve data

To set a key-Value Pair in session storage, you only need to write a line of code like this:

SessionStorage. setItem (yourkey, yourvalue );

To obtain data here, you only need to do this:

Var item = sessionStorage. getItem (yourkey );

Store the value "This is a sample sentence" in session storage. You can write it like This:

SessionStorage. setItem (1, 'This is a sample sentence ');

Note that the key value here is 1, but it does not mean that it is the first value. It only converts the number "1" to the character "1" and uses it as the key value, however, this does not mean placing the key-value pair at the first position.

You can use the alert method in javascript to obtain the sentence:

Var item = sessionStorage. getItem (1 );
Alert (item );

Another example of setItem:

SessionStorage. setItem ('name', 'john ');

You can use it to obtain:

Var name = sessionStorage. getItem ('name ');

Delete and clear data

There are also some methods to delete and clear data from network storage. The removeItem () method is used to delete a specific item from the list.

Var item = sessionStorage. removeItem (yourkey );

Remember, you can also reference only the key value of a data item and delete it from the list:

Var items = sessionStorage. removeItem (1 );

The clear () method is used to clear all items in the list. You can use the following methods:

SessionStorage. clear ();

You can also use the length attribute to find the number of key/value pairs in storage, such:

Var no_of_items = sessionStorage. length;

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page