Persist Data With Vue 3

Back in the old days, well not that old really but you get where I'm going here! Anyway, back in Vue 2 we had Vuex, well in Vue 3 we still have Vuex, but anyway I'm rambling.

So, imagine we had some data that was required to stay within a component when we refreshed or reloaded. That data needed to stay as the user needed to interact with it or amend it for some reason. Now back in Vue 2 we would use Vuex store and then a package that would persist the state to either LocalStorage or SessionStorage. What would happen would be that Vuex would hold the store and then on refresh persist data to storage, when the page reloads it would grab the storage data and return it to the store.

So that's how we did it in Vue 2 which is now upgraded to Vue 3. Vue 3 doesn't work with Vue persist at the time of writing this and we must work out a new way of making sure data is always available to us. How do we do that? Well, we do that by cutting out the middleman that is Vuex and just going directly to the local storage on the browser.

Lets take the below code as an example:

// Sets an item with a Key to local storage
const saveStorage = function(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
};

As we can see we have a simple function that takes two parameters. the first is key and that's the name of our storage item, something like 'user' or 'token' and then we take some data. Now the local storage or session storage only handles strings so before we ship the data over to it, we must turn it into a string which is what JSON.stringify is doing for us.

Perfect right? So how do we get storage data, well again with a function like so:

// Looks for a local storage item and returns if present
const getStorage = function(key, item) {
    if( localStorage.getItem(key) && item) {
        const data = JSON.parse(localStorage.getItem(key))
        return data[item]
    }
    else if(localStorage.getItem(key)) {
       return localStorage.getItem(key)
    }
};

So we are working with 2 scenarios here:

1. We want a part of some data. So we could have a list of 20 users and we want user 19. So the key would be 'users' and the item would be '19'. We then parse the data on the return so we can use the object.

2. We want all the data back and simply supply a key to the function. Something like 'token' or 'user'

And lastly we need a way to clear data that we would no longer need or that we will destroy when the site is navigated away from:

// Clear a single item or the whole local storage
const clearStorage = function(key='false') {
    if(key) {
        localStorage.removeItem(key);
    } else {
        localStorage.clear();
    }
}

Again we have two scenarios here:

1. We want to supply a key and just remove a certain piece of data.

2. We want to clear the whole storage and start a fresh.

And that is really that, it works super well and makes handling data in a Vue SPA really easy and all components have access to a single source of data truth!

The whole file should be as follows and check the video out down below for some real world examples of how it works.

// Sets an item with a Key to local storage
const saveStorage = function(key, data) {
    localStorage.setItem(key, JSON.stringify(data));
};

// Looks for a local storage item and returns if present
const getStorage = function(key, item) {
    if( localStorage.getItem(key) && item) {
        const data = JSON.parse(localStorage.getItem(key))
        return data[item]
    }
    else if(localStorage.getItem(key)) {
       return localStorage.getItem(key)
    }
};

// Clear a single item or the whole local storage
const clearStorage = function(key='false') {
    if(key) {
        localStorage.removeItem(key);
    } else {
        localStorage.clear();
    }
}
// Exports all avaliable functions on the script
export {getStorage, saveStorage, clearStorage}

Thanks for stopping by and happy coding!