VueStorage

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

Works for Vue 2 & 3.

demo

Try it out!

dependencies

• VueDemi

setup

npm

npm i @seregpie/vue-storage

npm i @vue/composition-api # if using Vue 2

import VueStorage, {
  localStorage,
  sessionStorage,
  stored,
} from '@seregpie/vue-storage';

browser

<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/@seregpie/vue-storage"></script>

The plugin is globally available as VueStorage.

usage

Composition API

import {stored} from '@seregpie/vue-storage';

export default {
  props: {
    userId: Number,
    userName: String,
  },
  setup(props) {
    let displayedUserName = stored(
      () => `myAwesomeApp/users/${props.userId}/name`,
      {
        type: String,
        default: () => props.userName,
      },
    );
    return {
      displayedUserName,
    };
  },
};

Options API

Install the plugin.

import {createApp} from 'vue'
import VueStorage from '@seregpie/vue-storage';

let app = createApp({/*...*/});
app.use(VueStorage, {
  prefix: 'myAwesomeApp/',
});
app.mount('body');

Define the options.

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

If the key option is omitted, the property name is used instead.

stored: {
  backgroundColor: {
    type: String,
    default: '#fff',
  },
},

plugin options

app.use(VueStorage, {
  optionName: 'stored',
  prefix: '',
})

| argument | description | | ---: | :--- | | optionName | A string as the name of the component option that contains all the stored properties. | | prefix | A string as the prefix for each storage key. |

API

stored

stored(key, {
  type: JSON,
  default: null,
  session: false,
})

Creates a reference to a stored item.

| argument | description | | ---: | :--- | | key | A string as the key. Can also be a getter function or a ref. | | type | An object with the parse and stringify functions to manage how the data is stored. Use Boolean, Number or String for a predefined functionality. | | default | Anything as the default value that is returned if the key does not exist. Can also be a getter function or a ref. | | session | If true, the session storage is used instead of the local storage. Can also be a getter function or a ref. |

Returns the created reference.

let key = 'myAwesomeApp/numbers';
let r = stored(key, {
  type: {
    parse: (string => string.split('|').map(Number)),
    stringify: (array => array.join('|')),
  },
  default: [],
});

r.value = [1, 2];
console.log(r.value); // => [1, 2]
console.log(localStorage.getItem(key)); // => '1|2'

r.value = null;
console.log(r.value); // => []
console.log(localStorage.getItem(key)); // => null

localStorage

The reactive local storage.

Uses the same API as window.localStorage.

let key = 'myAwesomeApp/backgroundColor';
let backgroundColor = localStorage.getItem(key);
localStorage.removeItem(key);

sessionStorage

The reactive session storage.

Uses the same API as window.sessionStorage.