Vue Web Storage

!ts

A minimalistic Vue.js plugin for web storage

$3

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

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

``bash

yarn

yarn add vue-web-storage

npm

npm install vue-web-storage
`

Usage

`js
import {createApp} from 'vue';
import StoragePlugin from 'vue-web-storage';
const app = createApp({}).mount('#app')
app.use(StoragePlugin);
// Use as
// this.$localStorage
`

Configuration (optional)

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

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

$3


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.
`js
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.
`js
this.$localStorage.get('name')
this.$localStorage.get('doesNotExistsInStorage','defaultValue')
`
#### remove(key)
Removes the individual key from storage.
`js
this.$localStorage.remove('name')
`
#### clear(?force = false)
Removes all keys from storage. Passing true will clear whole storage without taking prefix into consideration.
`js
this.$localStorage.clear()
`
#### keys(?withPrefix = false)
Returns array of keys stored in storage. Passing true will return prefixed key names.
`js
this.$localStorage.keys()
`
#### hasKey(key)
Returns true if key exists in storage regardless of its value.
`js
this.$localStorage.hasKey('name')
`
#### length()
Returns the number of keys stored in storage.
`js
this.$localStorage.length()
`

$3

* :bulb: 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.
`js
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.
`js
this.$localStorage.off('name', this.onChangeName)
`
#### clearEvents(?key)
* Removes all listeners for the given key otherwise clears the listeners pool when key not specified.
`js
this.$localStorage.clearEvents('name');
this.$localStorage.clearEvents()
`

Install in non-module environments (without webpack)


`html






`

Testing

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

Resources

* Web Storage API
* Browser support status
* Web Storage Quota
* Storage Event Example

Changelog

Please see CHANGELOG for more information what has changed recently.

License

MIT License