Before I explain what local storage is, we must first take a look at the window object.
The Window Object
What is Local Storage?
Local storage is property of the window object. It returns a reference to the Storage object on a web page.
If you look into the window object in the browser’s console, there you’ll find the local storage API with methods like getItem and setItem. These are the functions we will use in our upcoming example.
Local storage provides basic CRUD operations and allows you persist information in the computer’s browser. This prevents user-specific information from being lost without requiring the server to store it in a central database. Let’s say we created a simple web application using HTML that took input from the user and displayed it in the body of the page. If we refresh the page, the data that was displayed in the body of the page would disappear. Since standard HTML pages are static, a refresh would cause the page to revert to its original structure.
When we use local storage, the data saved will persist in the browser until you manually clear it out in the browser settings, or by clearing it out programmatically. That means that data will persist even after a refresh or if the browser is closed and reopened.
The data is stored in key-value pairs and the value must be a String. You can still save values like arrays or any other object, but you can use JSON.stringify to convert it to a string and then JSON.parse to change it back when you need to use it. Let’s look at our example.
Example Web App Using Local Storage
I’ve created a page to demonstrate how to use local storage to persist some data. The page allows a user to post and delete tweets.
Using local storage, we’re able to persist the tweets to memory, so even if we refresh or leave the browser, the tweets will still be there unless we delete them. Let’s take a look at the functionality that brings this to life.
What we will cover in the example:
- Add a tweet to the page
- Remove tweet from page
- Save tweet to local storage
- Retrieve tweets from local storage
- Remove tweet from local storage
Here we have an event listener to listen in on when a user posts a tweet. First we’ll add the tweet to the list of tweets on page and then we will save the data using local storage.
The add tweet function takes in the text value of the tweet from the input field. First we create a list item. Each list item will have the following:
- Profile image
- Name and handle
- Time when tweet was posted
- Tweet content
- Trash icon to delete a tweet
- Other interactive icons
Once we create the list item with the above content, we then add the list item to the top of our list of tweets.
To remove a tweet, the user must click the trash icon. Clicking the icon will fire an event listener to remove the tweet. The deleteTweet function takes in the corresponding list item and remove it from the list of tweets.
I’ve created a Storage class that will take care of adding, retrieving, and removing tweets from local storage.
Saving To Local Storage
Once we’ve added a tweet to the list, we will save the content to local storage. To do that, we will retrieve and save any tweets that were previously added to storage in an array, push the new tweet inside the array, and then update our stored tweets with the newly updated array of tweets.
Like I’ve mentioned before, data is stored to local storage in key-value pairs and the value has to be a string. In this case we convert our array of tweets into a string and then update the value to storage.
Retrieving From Local Storage
To get the tweets, we check local storage using the key and parse the value that is returned to an array. If the item did not exist, then what we’ll have is an empty array.
Removing From Local Storage
To remove that tweet from local storage, first we get all the tweets from storage, iterate through the array of tweets and remove the item that matches the tweet value. Once we remove the item from the array, we update our tweets in storage.
As you can see, we were able to persist our data without any server-side code or having to deal with databases. Ultimately, for real world applications that would be a necessity, but using local storage can be helpful to those that are starting out with some basic front-end concepts.
Read more at plainenglish.io