How to use Web Storage in Browsers

Pulsara Sandeepa
Apr 17 · 3 min read

Browsers can store key-value pairs in a better way than using cookies.

Photo by Andrew Neel on Unsplash

In this article, I am going to discuss HTML web storage that is used in Web browsers. Let’s dive into the explanation.

What are cookies?

Browser cookies are identified and read by “key-value” pairs. These tell cookies where to be sent and what data to recall. Cookies are stored in web browsers that contain users’ information, and they can store the user’s browsing activity, such as user’s details that entered through form fields and payment information.

There are two types of cookies that are more important.

• Persistence cookie

This cookie has a specific date and a time that expires. This expiration time can be changed by the developer according to the user’s need. This cookie is transferred through the server whenever a user visits the website or every time the user views a resource belonging to that website from another website.

Session cookie

This is also known as an in-memory cookie because it exits only temporarily while the user is navigating a website. Sessions cookies are deleted when closing the browser. These cookies have no expiration time like persistence cookies.

Cookies are safe since the data in cookies doesn’t change. They can’t infect computers with viruses or other malware. Some cyberattacks can hijack cookies and gain access to your browsing sessions.
Their ability to monitor people’s browsing histories poses a threat.

Third-party cookies are even more dangerous. They are generated by the ads that are linked to the web pages we are surfing. Even if users never click on the ads, visiting a site with ten ads will result in the creation of ten cookies.

Advertisers and analytics organizations can use third-party cookies to monitor an individual’s browsing history around the web on any site that contains their advertisements. So this is a major threat to the privacy of users.

Why we use HTML web storage.

Web Storage provides storing key-value pairs in browsers with a greatly enhanced capacity than the cookies. There are two main types of storage as local storage and session storage. They behave similarly to persistence cookies and session cookies that we discussed earlier.

Cookies are used to communicate with servers, they have been added automatically to all HTTP request headers and they can be accessed by both the server and client-side. But web storage isn’t set to the HTTP requests and its only falls under client-side scripting.

When we are discussing storage sizes, cookies are restricted to 4 kilobytes but web storage provides 5 -10 megabytes storage capacity.

Web storage exposes an associative array data model of keys and values that are both strings, making it a stronger programmatic interface than cookies.

How to use web storage?

Web Storage can store and access from one origin. There are two mechanisms within Web Storage that we can use.

  1. local Storage
  2. session Storage

Let’s discuss about their usage separately.

  • localStorage persists even if the browser is closed and reopened.
  • Stores data with no expiration date, so it gets removed through clearing the Browser cache and using javascript.
  • This has the maximum storage limit amongst the three.

session Storage🎊

  • sessionStorage stores data for only one session it means, as long as the browser is open, including page reloads and restores
  • Data is never transferred to the server.
  • Storage limit is at most 5MB and its larger than cookie.

Conclusion

Here we discussed why we have to use HTML Web storage more than cookies. I assume this article will be really helpful to you for developing your knowledge and skills. Let’s meet with another interesting article in the future.

Thank you guys😍

What is a Cookie? How it works and ways to stay safe | Kaspersky

HTTP cookie — Wikipedia

Web Storage API — Web APIs | MDN (mozilla.org)

Web storage — Wikipedia

HTML Web Storage API (w3schools.com)

Nerd For Tech

From Confusion to Clarification

Pulsara Sandeepa

Written by

Tech Enthusiast | Undergraduate | Blogger

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Pulsara Sandeepa

Written by

Tech Enthusiast | Undergraduate | Blogger

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store