This article is for those getting started with learning to build web applications with HTML, CSS and JavaScript. If you want to store some data to a web application without getting into server-side code and databases, I will show you how you can persist your data using local storage.

Before I explain what local storage is, we must first take a look at the window object.

The Window Object

The window object represents a browser window that contains a DOM document. This object is created automatically by the browser. It contains properties and methods that we can use to control or manipulate the browser using our JavaScript code.

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

Adding Tweets

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.

Removing 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.

Local Storage

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.

Conclusion

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


Persist Application Data with Local Storage was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.