Saving data with the standard JavaScript localStorage object in a Vue app is a pain because it has limited features.

To make our lives easier, we can use a library to make our lives easier.

In this article, we’ll look at how to use the vue-ls library to save data to local storage the Vue way.

Getting Started

We can use the vue-ls library to lets us manipulate the local storage of a browser in an easy way.

To install it, we can run:

npm i vue-ls

Then to use it, we first register the plugin:

import Vue from "vue";
import App from "./App.vue";
import Storage from "vue-ls";

const options = {
  namespace: "vuejs__",
  name: "ls",
  storage: "local"
};

Vue.use(Storage, options);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We called Vue.use with an options object.

The namespace is the prefix to add the key.

The name is the property name to access the vue-ls methods.

storage is the kind of storage to save the data in. It can be local, storage or memory.

Saving Data

To save data in a component, we can write:

<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    this.$ls.set("foo", "boo", 60 * 60 * 1000);
  }
};
</script>

We called this.$ls.set to save an item with the key vuejs__foo since we prefixed the key withe vuejs__ according to the namespace prop.

The second argument is the key, the 3rd is the expiry time.

The last 2 arguments will be saved as a stringified object.

The key would be vuejs__foo and the value is:

{"value":"boo","expire":1589754925116}

We can check against the expiry timestamp and do what we want with it if it expires.

Adding an expiry time is a feature that isn’t available with local storage.

So, this is a valuable feature.

Watching for Changes

We can also add listen for changes in data with:

<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    const callback = (val, oldVal, uri) => {
      console.log(val, oldVal, uri);
    };

    this.$ls.on("foo", callback);
    this.$ls.set("foo", "boo", 60 * 60 * 1000);
  }
};
</script>

We have the this.$ls.on method. The first argument is the key without the prefix.

The callback it a callback when the local storage item with vuejs__foo is updated.

It has the val parameter with the current value. oldVal has the current value.

uri is the URL that the app is hosted on.

We watch the value with this call.

To unwatch the item, we can write:

this.$ls.off('foo', callback)

Where callback is the same callback we passed into the $on method.

Getting Data

To get a local storage item value by its key, we can write:

this.$ls.get('foo', 10);

Then we get the local storage with the key foo. If the value isn’t found, then 10 is returned.

Finally, to remove a value, we can write:

this.$ls.remove('foo');

to remove the value with the key vuejs__foo assuming the namespace is set to vuejs__.

Conclusion

vue-ls is an easy to use local storage library that lets us do things like adding an expiry timestamp to the saved data and watch for changes to values in addition to what’s already available in browser’s localStorage object.