Save And Load Data Across Browser Sessions – VueStorage

Save And Load Data Across Browser Sessions – VueStorage

The VueStorage allows components to save and load their data across browser sessions. 

VueStorage

Allows the components to save and load their data across the browser sessions.

demo

Try it out!

setup

npm

npm i vuestorage

ES module

Install the plugin globally.

import Vue from 'vue';
import VueStorage from 'vuestorage';

Vue.use(VueStorage);

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuestorage"></script>

If Vue is detected, the plugin will be installed automatically.

usage

new Vue({
  stored: {
    title: String,
    colorPalette: {
      type: JSON,
      default() {
        return ['Red', 'Green', 'Blue'];
      },
    },
    disabled: {
      type: JSON,
      key: 'myApp/disabled',
      default: false,
      session: true,
    },
  },
});

The option type manages how the data is stored. Two types are available: String and JSON. Default type is String.

The option key is the key to the storage. If the option is not provided, the key of the attribute is used instead.

Set session to true to use sessionStorage instead of localStorage.


Provide functions for the key and the default value to dynamically re-evaluate the stored data.

{
  props: {
    userId: Number,
    userName: String,
  },
  stored: {
    displayedUserName: {
      key() {
        return `myApp/users/${this.userId}/name`;
      },
      default() {
        return this.userName;
      },
    },
  },
}

Define custom parse and stringify functions to manage how the data is stored.

stored: {
  fancyNumbers: {
    type: {
      parse(v) {
        return v.split('|').map(v => Number.parseInt(v));
      },
      stringify(v) {
        return v.join('|');
      },
    },
    default: [],
  },
}

Github Repository

Tags: #VueJs