Using local storage in your web application

Local storage, which is included in the HTML5 Web Storage API, can be very handy when developing new JavaScript web applications. It is a storage object provided in modern browsers consisting of key/value pairs.

One of the benefits of local storage is that it persists across user sessions as well as after device restarts. A common use for local storage is caching data from a site in a situation where it would normally take extra time to retrieve; no HTTP requests are required.

The size of the local storage object is roughly around 5–10MB, but the actual amount depends on what browser you are using, the http protocol being used, and the domain. Local Storage is based on a synchronous API, meaning that getting values from local storage does block rendering; this isn’t so bad when you are dealing with small amounts of data. Since this is the case, it is advisable to access local storage after window.onload in order to prevent DOM render-blocking.

As mentioned, local storage can be a great tool and luckily it is very simple for developers to utilize. The local storage object can be directly written to using the setItem() method:

localStorage.setItem('drink','beer');

And you can then easily access any storage item using the getItem() method:

localStorage.getItem('drink');

Local storage items can be viewed in browser developer tools. Press Ctrl + Shift + C on Windows or Cmd + Shift + C on Mac to access Developer Tools, then click on the Application tab and you will see the key value pairs in local storage. You then have the option to manually delete or add items.

Local Storage in Dev Tools

Items that you want to store in local storage are required to be strings. You can easily address this by using JSON.stringify() and JSON.parse() on the data that you wish to store or retrieve.

One of my favorite benefits of local storage is , unlike when using cookies, local storage will persist “forever”, unless the values and keys are manually cleared. Cookies will expire after a certain period of time or frequently get cleared.

I hope this helped you learn the basics of local storage. So try using local storage in your next project. It may come in handy!