1. vue-localstorage
Vue.js localStorage plugin with types support
vue-localstorage
Package: vue-localstorage
Created by: pinguinjkeke
Last modified: Tue, 28 Jun 2022 19:49:23 GMT
Version: 0.6.2
License: MIT
Downloads: 34,461
Repository: https://github.com/pinguinjkeke/vue-local-storage

Install

npm install vue-localstorage
yarn add vue-localstorage

VueLocalStorage

CircleCI status
npm version
npm downloads

LocalStorage plugin inspired by Vue typed props which take a care of typecasting for Vue.js 1 and 2 with SSR support.

Install

 npm install vue-localstorage --save

or

 bower install vue-localstorage

Usage

 import VueLocalStorage from 'vue-localstorage'

Vue.use(VueLocalStorage)
// Or you can specify any other name and use it via this.$ls, this.$whatEverYouWant
Vue.use(VueLocalStorage, {
  name: 'ls',
  bind: true //created computed members from your variable declarations
})

// Use localStorage from Vue object
Vue.localStorage.set('someNumber', 123)
Vue.localStorage.get('someNumber')

// Fallback value if nothing found in localStorage
Vue.localStorage.get('propertyThatNotExists', 'fallbackValue') // Will return 'fallbackValue' string

// Default type if value isn't registered in localStorage section
Vue.localStorage.get('property', null, Number)

//register localStorage variables and adds computed variables to local components
//to be used like regular computeds that are stored in the localstorage
var vm = new Vue({
  localStorage: {
    someObject: {
      type: Object,
      default: {
        hello: 'world'
      }
    },
    someNumber: {
      type: Number,
    },
    someBoolean: {
      type: Boolean
    },
    stringOne: '',
    stringTwo: {
      type: String,
      default: 'helloworld!'
    },
    stringThree: {
      default: 'hello'
    }
  },
  methods: {
    someMethod () {
      let lsValue = this.$localStorage.get('someObject')
      this.$localStorage.set('someBoolean', true)
      this.$localStorage.remove('stringOne')
    }
  }
})

License

[MIT]

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin