Local Storage

Normally, a server was required to store data in the early days of the internet. But, at present, it's possible to save data on browsers and other programs without interacting with a back-end server, all thanks to Web Storage API. The browsers can store key-value pairs with the help of the Web Storage API. In this topic, you are going to learn about two mechanisms provided by Web Storage API: sessionStorage and localStorage.

What is localStorage

The localStorage is a mechanism or a storage type provided by the Web Storage API of the browsers. This storage type allows web applications to store the user's data in key-value pairs locally within a user's browser with no expiration date. localStorage keeps the saved data even if you close the browser and reopen it. This is useful in many ways, for example, if you want to remember a user's login on a dummy website, save items in a shopping cart, etc. And, of course, you should not save any sensitive information or data in the local storage.

You can access the localStorage object directly from the global object i.e. window object as shown below:

window.localStorage

You can try and toy around with the localStorage in your own browser and study the results. There are other methods provided by the localStorage which we'll discuss in the next section.

What is sessionStorage

sessionStorage is a mechanism or another storage type provided by the Web Storage API of the browsers. This storage type also stores the user's data in key-value pairs. sessionStorage stores the user's data only for a session, which means that as soon as you close the browser the data will be wiped, but it will survive refreshing a page. Similarly, when you open a page in a new window or in another tab, the web browser creates a new session and the data that was stored in sessionStorage will be deleted.

The sessionStorage data is only accessible when a page is requested from a server since it's linked to a server session. When a page is viewed locally rather than on a server, sessionStorage is not accessible. This also means that the data stored in the sessionStorage is unique to the page's protocol, for example, the sessionStorage will be different for these websites: https://www.example.com and http://www.example.com.

You can access the sessionStorage object directly from the global object i.e. window object as shown below:

window.sessionStorage

Methods of storage objects

There are different methods provided by both storage objects. For the explanation purpose, only localStorage is used as a reference but these methods work the same for sessionStorage:

1. clear()

• This method allows you to clear all the data from localStorage. As mentioned above, the clear method does not accept any parameters.

window.localStorage.clear();

2. setItem(key, value)

• This method allows you to add or store the key-value pairs in the localStorage object. As mentioned above, the method takes two parameters: a key and a value.

window.localStorage.setItem('thisisademokey', 'thisisademovalue');

3. getItem(key)

• This method allows you to get the items from the localStorage object. As mentioned above, the getItem method accepts a single parameter, a key, and it returns the value associated with the given key.

window.localStorage.getItem('thisisademokey');

4. removeItem(key)

• This method allows you to remove the provided key if it exists in the localStorage. If there is no key present in localStorage, then it will do nothing.

window.localStorage.removeItem(key);

5. length

• This method will give the total number or the length of the stored items in a storage object.

As mentioned above, these methods are also available for sessionStorage, and you can access, remove, and set the key-value pairs in sessionStorage same as in localStorage.

Examples

Now, let's take a look at an example of how you can use the storage objects in the console itself. Feel free to try it on your own, it'll be fun!

As mentioned above, the localStorage and sessionStorage objects can be accessed from the window object as shown below:

You can also view the information stored in localStorage and sessionStorage via developer tools of your browser. The image below shows the storage objects from the Application tab of the developer tools.

Now, we don't want any of the above storage, so we'll use the clear() method to clear all the storage that has been saved in localStorage and sessionStorage.

As you can see in the example above, the storage objects have been emptied. Now, let's use other methods to set our own information in these storage objects.

Similarly, you can try out other methods on your own and play with the storage objects offered by the Web Storage APIs.

Conclusion

In this topic, you've learned about the storage types offered by Web Storage APIs: localStorage and sessionStorage. localStorage stores the data on the client's browser and not in server-based databases, and the data stored in localStorage survives refreshing the page. sessionStorage also stores the data on the client's browser but the data stored is for a session only. The browser will delete sessionStorage when the browser window is closed.