Local Storage Basics • 10 min read

Introduction

Local storage is used in all modern applications as a means of storing user data for later use. This includes remembering the name of the user, their age, how many carts were in their item, etc. Point being, in order to develop a strong, foundational knowledge on web development, knowing how to store and use user information is an essential skill.

How it Works

As mentioned above, local storage is a useful mechanism for storing data in the browser’s memory. This means, even if the website is closed, once it’s reopened, the information from the last session is re-initialized, allowing you to start off with the same experience you left off from.

To better understand how this works, let’s take a look at a simple example:

//Gets the username from local storage
let storedUsername = JSON.parse(localStorage.getItem("name"));

//If no name is found in local storage, prompt for the nae of the user, and store it
if (!storedUsername) {
  username = prompt("What's your name");
  localStorage.setItem("name", JSON.stringify(username));
}

//If name is new, reiterate this command so it has a value
storedUsername = JSON.parse(localStorage.getItem("name"));

//Log the name of the user
console.log(`Your name is ${storedUsername}`);

In the code above, localStorage gets a username from the website’s memory and then outputs that name into the console. If no username is stored, then the user is prompted to be provide a name, and that name will be stored for later use.

In a nutshell, the code is used to remember the user’s name.

The most important parts of the code to note is JSON.stringify, JSON.parse, & the use of the localStorage object. These are what make storing data possible, and all that one needs to know in making a basic system for storing data. Let’s first analyze the anatomy of the the localStorage object.

localStorage Object

localStorage.method();

Local Storage, like many default JavaScript applications, is an object. This object has different methods, each serving its own unique purpose. For the case of the localStorage object, there are only 4 methods. These methods can store values, retrieve values & remove values. They can be found below.

  1. localStorage.setItem(“name”, “johnDoe”); = Stores a value in localStorage
  2. localStorage.getItem(“name”); = Retrieves a value from localStorage
  3. localStorage.removeItem(“name); = Removes a value from localStorage
  4. localStorage.clear(); = Removes all values from localStorage

As you can see from our example above, to save data in local storage, a name for that value must be specified, and then afterwards, the data you will save under that value name. To then retrieve this data, you use the getItem method. Just like that, you have a basic system for storing and retrieving data!

However, there is one caveat to this entire process. localStorage can only store values that are strings, which leads into another issue. How can we store objects, functions, arrays, and all these other things that are absolutely vital to store? Well, that leads us into the next part which is JSON.stringify & JSON.parse

JSONing

The first part of this dynamic duo is JSON.stringify which converts any datatype into a string.

//Basic Object
const person = {
  name: "John Doe",
  location: "England",
  age: "35"
}

const string = JSON.stringify(person);


console.log(string);

As you can see here, we created an object with various properties. Once we created this object, we made a new variable that uses JSON.stringify to turn the object into a string. Once we did that, we logged the string variable into the console. If you were to run these commands yourself, you’ll see how the object is completely changed to as tring.

To use JSON.stringify, all one must do is input a value as the parameter for this method. JSON.stringify(parameter);.

//Object is stored in localStorage using JSON.stringify
localStorage.setItem("objectExample", JSON.stringify(person));