Author: John Au-Yeung

We can use the vue-sessionstorage library to store Vue app data in session storage of our browser.

In this article, we’ll look at how to use it to save data.

Installation

We can install the library by running:

npm i vue-sessionstorage

Save Data in Local Storage

After installing the library, we can save data in local storage with by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueSessionStorage from "vue-sessionstorage";
Vue.use(VueSessionStorage);
Vue.config.productionTip = false;

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

App.vue

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

<script>
export default {
  name: "App",
  mounted() {
    this.$session.set("username", "user123");
  }
};
</script>

We just register the plugin in main.js .

Then we have the this.$session object available for us to use anywhere.

We call set with the key and value of the data we want to save to save it.

To get the data, we can use the this.$session.get method:

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

<script>
export default {
  name: "App",
  mounted() {
    this.$session.set("username", "user123");
    console.log(this.$session.get("username"));
  }
};
</script>

The this.$session.exists method checks if a key exists:

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

<script>
export default {
  name: "App",
  mounted() {
    this.$session.set("username", "user123");
    console.log(this.$session.exists("username"));
  }
};
</script>

The this.$session.remove method removes the item with the given key:

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

<script>
export default {
  name: "App",
  mounted() {
    this.$session.set("username", "user123");
    console.log(this.$session.remove("username"));
  }
};
</script>

The this.$session.clear method clears session storage data with the given key:

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

<script>
export default {
  name: "App",
  mounted() {
    this.$session.set("username", "user123");
    console.log(this.$session.clear("username"));
  }
};
</script>

With session storage, different instances of the same app can store different data in their own session.

The data can be set both per-origin and per-instance, which is per-window or per-tab.

So the clear method will clear all data with the given key.

Conclusion

We can use the vue-sessionstorage library to save data to session storage.

The vuex-persistedstate library lets us add persistence to local storage of our data in our Vuex store.

In this article, we’ll look at how to use it to save data.

Installation

We can install it by running:

npm install --save vuex-persistedstate

Also, we can install it with a script tag:

<script src="https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js"></script>

Then the window.createPersistedState is available for us to use.

Saving Vuex State in Local Storage

We can save our Vuex state to local storage with the createPersistedState function.

To use it, we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);
Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState()],
  mutations: {
    increment: (state) => state.count++,
    decrement: (state) => state.count--
  }
});
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <p>{{ count }}</p>
    <p>
      <button [@click](http://twitter.com/click "Twitter profile for @click")="increment">increment</button>
      <button [@click](http://twitter.com/click "Twitter profile for @click")="decrement">decrement</button>
    </p>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    },
    decrement() {
      this.$store.commit("decrement");
    }
  }
};
</script>

In main.js , we registered the Vuex plugin and created the store.

The store has the count state and mutations to change it,.

Also, we added the plugin created by the createPersistedState function from the vuex-persistedstate library.

This way, we can store the store’s state in local storage.

In App.vue , we get the count state in count computed property.

And we call commit to commit the mutations for changing the count state.

Storing Vuex State as Cookies

Alternatively, we can store Vuex states as cookies. To do that, we can use vuex-persistedstate with the js-cookie library.

We install js-cookie by running:

npm i js-cookie

In main.js , we change it to:

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import Cookies from "js-cookie";

Vue.use(Vuex);
Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => Cookies.get(key),
        setItem: (key, value) =>
          Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: (key) => Cookies.remove(key)
      }
    })
  ],
  mutations: {
    increment: (state) => state.count++,
    decrement: (state) => state.count--
  }
});
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

App.vue stays the same.

We passed in an object so that we can get the data by its key with getItem .

setItem sets the data with the given key. expires is the expiry time in days. secure makes sure the cookie is only set over HTTPS.

removeItem removes an item by its key.

Secure Local Storage

We can scramble the data in local storage with the secure-ls library.

To use it, we can change main.js to:

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import SecureLS from "secure-ls";
const ls = new SecureLS({ isCompression: false });
Vue.use(Vuex);
Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => ls.get(key),
        setItem: (key, value) => ls.set(key, value),
        removeItem: (key) => ls.remove(key)
      }
    })
  ],
  mutations: {
    increment: (state) => state.count++,
    decrement: (state) => state.count--
  }
});
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

We import the secure-ls library and create the ls object to let us get, set, and remove items from local storage.

Whatever is saved will be scrambled so no one can see it the browser dev console.

Conclusion

The vuex-persistedstate library is a useful library for storing Vuex state in local storage.

This way, we can keep the after we refresh the page.