Vue Web Storage Component

Vue Web Storage Component

Vue Web Storage Component - A minimalist Vuejs component for web storage that supports both localStorage and sessionStorage.

A minimalist Vuejs component for web storage that supports both localStorage and sessionStorage.

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

vue javascript web-development programming developer

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

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Learn VUE 3 by Making a Web App ~ Composition API, Vue JS Hooks?

Learn how the new Vue JS 3 works by making a simple and easy web application to increment and decrement a numerical value using the Composition API, including Vue Ref, Vue Reactive and Vue Computed.