Easy Way to use localStorage with Vue

In this post, we will learn about storing and getting data on the client side using localStorage with Vue JS.

To use local storage of the web browser, we have to use the localStorage.setItem() and localStorage.getItem() method in vue application.

The localStorage helps to store data locally within the user’s web browser. It stores data without any expiration date.

The localStorage() have a limit of 5mb and it can store only string.

Now, let’s see how to store, get, and clear data from window.localStroage using Vue Js.

Let’s understand it with an example.

Suppose we have an HTML form with names and email addresses for users to fill.

<template>
 <form @submit.prevent="saveData()">
     <input type="text" placeholder="name"  v-model="user.name">
     <input type="email" placeholder="email" v-model="user.email">
     <button type="submit">Save</button>
 </form>
</template>
<script>
    export default{
      data(){
        return{
          user:{
             name:'',
             email:''
          }
        }
      },    
}
</script>

Now to save the data from the input field to our browser’s local storage we will write the function.

Store data in localStorage

To store data in local storage, we will use the localStorage.setItem() method.

It takes two parameters, one is the key and the value which are the data provided by users.

The syntax is

localStorage.getItem('myKey', data)

Here, myKey is the key and data are the values to store in local storage.

Now let’s write the function to save the user input data.

methods:{
  saveData(){
     localStorage.setItem('my_data', JSON.stringify(this.user)
  }
}

Once the user clicks the save button in the form, the saveData() function will save the data in the local storage of the browser.

The JSON.stringify() method is used before saving the data to convert the user object into a JSON string.

Get data from local storage

To get data from local storage we have to use the localStorage.getItem() method and specify the key of the stored data.

So to get the user data back when the page loads, we will code like this.

mounted(){
   this currentUser = JSON.parse(localStorage.getItem('my_data')
}

We have passed the key (here my_data) to localStorage.getItem(), which will return the data assigned to it.

The JSON.parse() is used to convert the text into a JavaScript object.

Clear all data from local storage

To clear all data from local storage in your browser we will use this:

localStorage.clear()

The clear() method will remove all the stored objects from your browser.