A minimalistic Vue.js plugin for web storage

A minimalistic Vue.js plugin for web storage

Vue Web Storage .A minimalistic Vue.js plugin for web storage

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

# yarn
yarn add vue-web-storage

# npm
npm install vue-web-storage

Usage

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

Configuration (optional)

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

// This will register two instances
// Vue.$sessionStorage
// Vue.$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.

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()

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
};
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.

Download Details:

Author: ankurk91

Source Code: https://github.com/ankurk91/vue-web-storage

vue javascript vuejs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.