A minimalistic Vue.js plugin for web storage
localStorage
or sessionStorage
or bothJSON.stringify
and JSON.parse
# yarn
yarn add vue-web-storage
# npm
npm install vue-web-storage
import Vue from 'vue';
import StoragePlugin from 'vue-web-storage';
Vue.use(StoragePlugin);
// Use as
// Vue.$localStorage
Vue.use(StoragePlugin, {
prefix: 'your_app_slug_',// default `app_`
drivers: ['session', 'local'], // default 'local'
});
// This will register two instances
// Vue.$sessionStorage
// Vue.$localStorage
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.
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 throws error.
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()
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
};
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)
Vue.$localStorage.clearEvents('name');
Vue.$localStorage.clearEvents()
<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-web-storage@5"></script>
<!-- Init the plugin -->
<script>
Vue.use(VueWebStorage.default)
</script>
__test__
folder.yarn test
Please see CHANGELOG for more information what has changed recently.
Author: ankurk91
Source Code: https://github.com/ankurk91/vue-web-storage
#vue #javascript #vuejs