How the Web Storage API Works

Web browsers have come a long way, from cookies to the Web Storage API. Let’s understand these plus sessionStorage vs. localStorage.

One of the most essential keys for modern web development and web browsers is the Web Storage API. It made web development easier for developers, as it allowed cookies to store data in web browsers. For users, it enables a more intuitive and improved way of browsing.

Web browsers are an important part of the internet. They are responsible for helping us get access to the world wide web. A web browser handles taking you to any part of the internet. It wouldn’t be possible to do the majority of the things that we do on the internet today without a web browser—shop online, watch videos, download books, upload pictures, play games, etc. Browsers made the internet richer, providing access to any kind of content in any shape or form.

The death of the most notorious web browser of all time, Internet Explorer, marks the end of an era. It was a very famous and important web browser at some moment in web history, but, due to the pace of innovation of web browsers, it had fallen from grace.

Innovation in the web browser field is huge. Support for new APIs is released in every new version. Modern browsers support many different features that in previous decades wouldn’t have been possible. The pace of innovation is driving web browsers to be more and more modern, reliable, structured and accessible.

We’ll learn about the Web Storage API and how it aids this innovation, but first let’s start with understanding how cookies work.

Cookies

Have you ever wondered how a website remembers you after you have left? Sometimes you have to log in, but sometimes you don’t need to because the website remembers you.

Cookies are a small bit of data stored as a text file on a user’s browser by a website. Cookies associate bits of data to a specific user. It is a piece of data stored on your browser by a website that is automatically attached to every request. On each request, cookies will be sent to the server with the HTTP header.

They are designed to hold a modest amount of data specific to a particular client and website and can be accessed either by the web server or the client computer. This allows the server to deliver a page tailored to a particular user, or the page itself can contain some script that is aware of the data in the cookie and so is able to carry information from one visit to the website (or related site) to the next.
— What Are Cookies?

A cookie consists of a name, value, end date, size in bytes. It stores a certain piece of information about you as a user, your preferences and settings to help the website to customize your user experience.

For a long time, cookies were the only way to store information about the users accessing a website on a browser. They were used for plenty of different things—storing shopping cart data, storing user settings, keeping a user logged in for a period of time, etc.

The final release of HTML5 in 2014 changed everything for the web. The latest update before that was in 1999, and the number of internet users in the world had increased significantly. The era of smartphones, tablets and many other mobile devices had hit, introducing new challenges to engineers and software developers.

HTML5 was released to bring more consistency to the web. It was released to make the process of creating web applications easier and accessible to everyone. New elements were introduced, and a few elements were deprecated. New attributes, new APIs and a new way of storing data in the browser had come along.

Web Storage API

The Web Storage API is a mechanism that modern browsers have that can store key-value pairs of data. Added in HTML5, it deals with client-side data only, and large amounts of data can be stored locally, without affecting website performance.

What are the advantages of Web Storage over cookies?

• Bandwidth reduction — stored on client-side only, so it’s not attached to every request.
• Size limit — you can store larger amounts of data (5MB storage per domain).
• Data type support — supports string only but the JSON.stringify method makes it possible to store more data types.
• Expiration date — it offers a way to permanently store data (until the user clears the browser cache).

Another huge advantage of Web Storage over cookies is the accessible and intuitive API. To get or set values using Web Storage, you use JavaScript and you can do it by using a single method, like getItem or setItem.

There are two mechanisms in the Web Storage API that we can use to store data on our browsers: Session Storage and Local Storage. We’re going to cover both mechanisms now.

Session Storage & Local Storage

The sessionStorage object stores data only for a session. The data will be deleted from sessionStorage after the browser is closed.

Whenever a new page is loaded on your browser, a unique page session gets created and assigned to that particular page. That session is valid only for that particular page. When you open the same page in many different tabs, a new unique session gets created for each tab.

The localStorage object stores data across browser sessions. This means that when the browser is closed, the data remains.

The main difference between the two mechanisms is that sessionStorage stores data only when the browser is open and localStorage continues to store data after the browser is closed.

How They Work

Both localStorage and sessionStorage are available via the window object property. They’re part of the Window interface in JavaScript.

Both mechanisms share the same properties:

• setItem(key, value) – store key/value pair
• getItem(key) – get the value by key
• removeItem(key) – remove the key with its value
• clear() – delete everything
• key(index) – get the key on a given position
• length – the number of stored items

setItem

The setItem method is used for storing values. It takes two parameters: a key and a value. The key is a reference for getting the value of it later.

For example, imagine that we want to save our name using the localStorage, this is how we would do it:

window.localStorage.setItem('name', Leonardo');

getItem

The getItem method is used for accessing the data stored. It accepts one parameter only, which is the key of our data. If we want to get our name that’s stored in localStorage, this is how it’s done:

window.localStorage.getItem('name');

removeItem

The removeItem method is for removing values stored. As a parameter it receives a key of the item we want to remove. If there is no item associated with the given key, this method will do nothing.

window.localStorage.removeItem('name');

clear

The clear method is similar to removeItem but instead it will remove all items stored. It clears the data for that domain and does not receive any parameters.

window.localStorage.clear();

key

The key method is very helpful to get the key of an item. Sometimes we want to get the key of a specific item but all we have is the index—this method does exactly that. We pass the index as a parameter and it returns the key for that item.

window.localStorage.key(index);

The Web Storage API is a great way to store data on your browser. Although, there are some points that you should take into consideration before storing data using it:

• Don’t store any sensitive user data.
• Don’t use it as a database (remember that it has only a 5MB limit).
• It’s insecure since it has no form of data protection and can be accessed by any code on your webpage.

Conclusion

The web has come a long way, from cookies to the Web Storage API. We can store any kind of data we want today using only browsers and nothing else (please don’t store any kind of sensitive data though). The sessionStorage and localStorage have some differences, but at the end of the day, they’re almost the same. Both mechanisms can be very useful for storing data.