With more logic and data manipulation brought to the frontend, some data storage problems start to arise. Among them, storing data betwen page reloads or sessions. This is a very common problem in SPAs (Single Page Applications), where you may have several data manipulations happening in between page reloads or would have to keep downloading the same data over and over from the server. There are cases where it's possible to minimize the user's wait time displaying info that is stored right in the browser using LocalStorage.

LocalStorage is a type of web storage that allows JavaScript applications to access data stored in the browser with no expiration date.

This functionality is available in the window object and you can access it like this:

const myStorage = window.localStorage
// or
const myStorage = localStorage

This will return a Storage object. This object has the property length that returns an integer representing the quantity of items stored in the object and it also has the following methods:

  • setItem
  • getItem
  • key
  • removeItem
  • clear

setItem

It accepts the parameters key and value that will be stored (or updated if that particular key already has some data associated):

myStorage.setItem(“name”, “David”)

In this case, "name" is the key and "David" is the value.

Important: If you want to store arrays or objects - something that will probably be more common in an application - first you will have to transform them into strings, using, for instance, JSON's stringify method: 
const myBrowser = {
  name: “Chrome”,
  openTabs: 3,
  consumedMemory: 512e9
}

myStorage.setItem(“browser”, JSON.stringify(myBrowser))

getItem

You pass the key to this method and it returns what you stored with that key, or null if it does not find anything associated.

myStorage.getItem(“name”)

// expected output
// “David”

If you stored an object or array like in the previous example, you will notice that getItem returns a string representation of the object, so you should use JSON's parse method to turn it into a "real" object again:

const myBrowser = myStorage.setItem(“browser”)
console.log(myBrowser)

// expected ouput
//  “{\”name\":\"Chrome\",\"openTabs\":3,\"consumedMemory\":512000000000}"

console.log(JSON.parse(myBrowser))

// expected output
// {
//    name: "Chrome",
//    openTabs: 3,
//    consumedMemory: 512000000000
// }

key

This method accepts an integer as a parameter and with that, it returns a key if it is stored in that position or null if there's nothing there. It works more or less like accessing positions in an array. In our examples, we had stored two items in LocalStorage: name and browser:

const position0 = myStorage.key(0)
const position1 = myStorage.key(1)
const position2 = myStorage.key(2)

console.log(`${position0}, ${position1}, ${position2}`)

// expected output
// name, browser, null

This method is useful if you need to iterate over the keys inside a loop, for instance.

removeItem

You pass a key to this method and it removes the associated value:

myStorage.removeItem(“name”)

Now,  getItem(“name”), will return null and key(0) becomes: “browser”.

clear

Last but not least, we have the method clear which completely clears the application's LocalStorage, removing all of its keys.

myStorage.clear()
console.log(myStorage.length)

// expected output
// 0

Limitations

It's important to note that:

  • You should not store sensitive information or user data in LocalStorage
  • It is not a replacement for traditional databases, since data is only available in the browser
  • It has a 5mb limit in most browsers

With this introduction to LocalStorage, you will surely be able to create more powerful applications. I hope this has inspired you to use it in your apps and if you want an example to start, take a look here in my GitHub. It's a very simple task manager written in Vue.js and uses LocalStorage to persist data.