Photo by Leon Seibert on Unsplash
Web Storage API... an upgrade on cookies
More than 5 billion people use the internet, yet browsers are able to recognize each person. Read on see how they do this.
The internet is a busy street filled with billions of people. You and I use web browsers to navigate this busy street and perform various activities such as reading this article, downloading items etc.
There are different individuals with different interests on the internet at any given time and browsers take advantage of this to give each person a different, personalized experience, to do this browsers use cookies.
What is a cookie
A cookie is a piece of information left on a browser by a website. The browser uses the cookie to personalize your experience and make your next visit to that website smoother.
Cookies are the reason you don't have to log in to some sites every time you visit, the website recognizes you and automatically grants you access.
For a long time, browsers have been storing user data using cookies, however, browsers now have better storage options. The arrival of HTML 5 brought some very nice upgrades for browsers. One such upgrade is the Web Storage API which has some advantages over cookies.
What are Web Storage APIs
Just like cookies, browsers store data using the Web Storage API. This data is stored or retrieved by the browser in key-value pairs. You can see these key-value pairs yourself by doing the following in your browser console.
Open your browser's dev tools
Navigate to the storage section
Select the Local or Session Storage option and click on any tab in it
The image below is an example from the chrome browser, you may have to do a quick google search if you use a different browser and cannot find storage.
Web storage API has the following advantages over cookies:
Web storage API does not grant a server the privilege to access a user's storage unlike cookies where a server has access to the user's data
Web storage API has more storage space
Web storage is easier to work with for developers
Cookies aren't permanent, they have an expiry date while Web storage API is permanent
Now let's talk about the types of Web Storage API
Types of Web Storage API
There are two kinds of Web Storage API, they are:
Local Storage
Session Storage
Local Storage
Local Storage holds permanent data. This storage does not lose data even if a browser page is refreshed or closed by the user.
The data in Local storage can only be cleared by a user either by writing a script to clear the storage or by clearing the storage manually in the browser's dev tools
Session Storage
Session storage holds temporary data. It loses data immediately after a user refreshes the page or closes it. It also doesn't transfer data to the server due to its temporary nature.
We have seen what local storage and session storage is, time to see how we can use them
Manually storing data with Storage API
Storage API is a property of the DOM, which means it can be manipulated using JavaScript.
To store something in our Web Storage we use the window.localStorage.setItem(key, value) or window.sessionStorage.setItem(key, value), this property takes two arguments: the key and the value properties we mentioned earlier. These arguments are written in strings.
Let's do a quick example of this, open your browser's dev tools and navigate to your browser's console. Type window.localStorage.setItem("event", "Nathanael is saying Hi") into your console (Note: The examples given in this article use local storage but it also applies to session storage)
Your console should be similar to the image below
Once you've typed this, hit enter. Then navigate to the storage section of your browser's dev tools select Local Storage and select the tab you're currently on. Inside there you should see something like the image below
Notice how our key and value arguments are as specified in the code. Our key is the "event" string we typed earlier and the value is "Nathanael is saying Hi".
Now, what if we want to retrieve the data we stored in the storage? We do this using the window.localStorage.getItem(key) method. This method takes just one argument though, unlike the setItem method. If we want to get the string we saved earlier we just need to type window.localStorage.getItem("event") and...
Look at that, our browser returned the value of our key to us.
Removing an item from Web Storage
You can remove an item from your storage by using the removeItem(key) method.
The removeItem() method takes in one argument and that is the key of the item you want to remove from your storage. Let's check this in action.
Navigate to your console once again and type window.localStorage.removeItem("event")
This will remove the item with the key of "event" from your Local Storage. You can confirm this yourself by navigating to the local storage section of your console and checking it. My local storage is shown in the image below
You can see the key and value pairs are empty.
There could be times when you have more than one item in your local storage and you wish to clear them all at once. In such a situation you use the window.localStorage.clear() method, This method doesn't take in any arguments. Be careful with its usage though, you wouldn't want to clear something important!
Conclusion
The internet has advanced a lot in recent times. This is evident from the fact that we went from cookies which could only store a small amount of user data to Web Storage. Web storage gives all the advantages cookies give while being more secure, this improves your experience on the internet a lot more.
If you have any comments or questions please feel free to drop them below or reach out to me on Twitter where I'm most active.