Vue Web Storage Component

Vue Web Storage Component

A minimalistic Vue.js plugin for web storage that supports both localStorage or sessionStorage.

Vue Web Storage

downloads npm-version github-tag license build-status codecov

A minimalistic Vue.js plugin for web storage

Features

  • Choose either localStorage or sessionStorage or both
  • Prefix all of your stored keys
  • Auto JSON.stringify and JSON.parse
  • Events for cross tab communication

Installation

# npm
npm install vue-web-storage --save

# Yarn
yarn add vue-web-storage

Usage

import Vue from 'vue';
import Storage from 'vue-web-storage';  
Vue.use(Storage); 
// Use as
// Vue.$localStorage

Configuration (optional)

Vue.use(Storage, {
  prefix: 'your_app_slug_',// default `app_`
  drivers: ['session','local'], // default 'local'
});

// This will register two instances
// Vue.$sessionStorage
// Vue.$localStorage

Methods

All methods takes care of prefix in key name, so you no need to specify key prefix when using them.

set(key,value)

Stores the value under specified key in storage. Convert value to JSON before saving. Returns true on success and false on errors.

Vue.$localStorage.set('name', 'john')
Vue.$localStorage.set('isAdmin', true)
Vue.$localStorage.set('roles', ['admin', 'sub-admin'])
Vue.$localStorage.set('permission', {id: 2, slug: 'edit_post'})

get(key, ?defaultValue = null)

Retrieves given key value from storage, parse the value from JSON before returning. If parsing failed then returns the actual value get from storage.

Vue.$localStorage.get('name')
Vue.$localStorage.get('doesNotExistsInStorage','defaultValue')

remove(key)

Removes the key from storage.

Vue.$localStorage.remove('name')

clear(?force = false)

Removes all keys from storage. Passing true will clear whole storage without taking prefix into consideration.

Vue.$localStorage.clear()

keys(?withPrefix = false)

Returns array of keys stored in storage. Passing true will return prefixed key names.

Vue.$localStorage.keys()

hasKey(key)

Returns true if key exists in storage regardless of its value.

Vue.$localStorage.hasKey('name')

length()

Returns the number of keys stored in storage.

Vue.$localStorage.length()

Events

  • These are not regular Vue.js events, these events to be used for cross tab communication.

on(key,fn)

Attaches a listener method to the given key. You can attach multiple methods on the same key.

const onChangeName = (newValue, OldValue, url) => {
  // do something when `name` value gets changed
};
Vue.$localStorage.on('name', onChangeName);
Vue.$localStorage.on('name', this.anotherMethod)

off(key,fn)

Removes specified listener method form the given key.

Vue.$localStorage.off('name', this.onChangeName)

clearEvents(?key)

  • Removes all listeners for the given key otherwise clears the listeners pool when key not specified.
Vue.$localStorage.clearEvents('name');
Vue.$localStorage.clearEvents()

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Init the plugin -->
<script>
Vue.use(VueWebStorage.default)
</script>

Testing

  • This package is using Jest for testing
  • Tests can be found in __test__ folder.
  • Execute tests with this command yarn test

Resources

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License

Github Repository

Tags: #VueJs