VueStorage
Allows the components to save and load their data across the browser sessions.
demo
setup
npm
npm i vuestorageES 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: [], }, }
