Beginner's guide to Javascript LocalStorage

The web is now dominated with more frontend web applications than ever, alas increasing the yearn to keep data on the browser for future purposes.

You might be building the next-generation e-commerce platform and want to keep cart data on the browser or even building a simple todo list app. No doubt, Javascript's localStorage API is a very easy way to make that possible on the browser. We'll be using the localStorage API to save and retrieve details of cities across the world. This tutorial is targeted towards developers with basic knowledge of javascript, If you haven't started Javascript before, I recommend you should read my previous article.

To get started, I recommend you have a browser, a code editor to punch in some codes, and of course a cup of coffee to roll along.

Let's dive in

Javascript LocalStorage is an application programming interface that allows access to saving and retrieving data on the client's computer. At its very basic level, it is an object and can be accessed across all sub-domains of an application.

What I mean is If you save an item to localStorage on website.com, You can still access it on developers.website.com but never from another domain.

So now you understand what Localstorage really is, Let's get to code.

Assuming we have a list of cities to be 'Cairo, Japan, Ogbomoso, Lagos, New York City', We can save this to the localStorage as a string and also receive it.

To save this to localStorage we can use

localStorage.setItem(key,item) or localstorage.itemname = item;

Let's break it down:

key is the unique name you have chosen to save an item, so In our case, we are saving cities, So our key would be cities. It is important to note that, the key is also the name you'll use to retrieve back your saved data. Furthermore, If a key already exists in the localStorage, the new name will overwrite the previous data. So Imagine we already stored cities, our new cities will displace/delete the previous one and replace it.

Saving Data into localStorage :

 var cities = 'Cairo,Japan,Ogbomoso,Lagos,New York'; //variable containing cities
//to save cities ,we'll use localstorage.setItem
localStorage.setItem('cities',cities); //or localStorage.cities = cities;
//the first parameter is the unique name we are using to save it and the second paremeter  is the data we're saving

Retrieving Data from LocalStorage To retrieve data from localStorage we'll use the localStorage.get(key) or localStorage.itemname; In this case, we'll be retrieving our list of cities(key).

var cities = localStorage.getItem('cities'); //or localStorage.cities;
//  'Cairo,Japan,Ogbomoso,Lagos,New York'

We talked about saving and retrieving, what of deleting? Oh yeah, It's essential to have a delete option too. We can remove an item/data from localStorage by referencing the key by using localStorage.removeItem(key). In our case, we might want to remove 'cities' from the database.

 localStorage.removeItem(key);

And that's all about localStorage.If you have any questions or contributions feel free to drop them in the comments section.

A new day another opportunity to be world-class.