Vue web storage - codingtube

Complete project of a minimalistic Vue.js plugin for web storage

Follow these steps to use Vue web storage

Version matrix

Vue.js version	Package version	Branch
2.x	5.x	5.x
3.x	6.x	master

Version matrix

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

# yarn
yarn add vue-web-storage

# npm
npm install vue-web-storage

Usage

import {createApp} from 'vue';
import StoragePlugin from 'vue-web-storage';

const app = createApp({}).mount('#app')
app.use(StoragePlugin);
// Use in your components
// this.$localStorage

Configuration (optional)

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

// It will register two different instances
// this.$sessionStorage
// this.$localStorage

Methods

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

set(key,value)

Stores the value under specified key in storage. Convert value to JSON before saving. This method throws error on failure.

this.$localStorage.set('name', 'john')
this.$localStorage.set('isAdmin', true)
this.$localStorage.set('roles', ['admin', 'sub-admin'])
this.$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 throws error

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

remove(key)

Removes the individual key from storage

this.$localStorage.remove('name')

clear(?force = false)

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

this.$localStorage.keys()

hasKey(key)

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

this.$localStorage.hasKey('name')

length()

Returns the number of keys stored in storage

this.$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, originUrl) => {
    // do something when `name` value gets changed
};
this.$localStorage.on('name', onChangeName);
this.$localStorage.on('name', this.anotherMethod)

off(key,fn)

Removes specified listener method form the given key.

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

clearEvents(?key)

Removes all listeners for the given key otherwise clears the listeners pool when key not specified.

this.$localStorage.clearEvents('name');
this.$localStorage.clearEvents()

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-web-storage@6"></script>
<!-- Init the plugin -->
<script>
    yourApp.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

Demo

Full project