Vue Web Storage

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/vue-web-storage@4"></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

Vue Web Storage Component