❤
npm
Sign UpSign In

vue-the-storages

1.0.2 • Public • Published

vue-the-storages

A Vue plugin that enhances localStorage/sessionStorage (supports vue2, vue3).

It allows two-way binding of storage data, multi-page data binding, storage event listener, and rich api (async/sync).

Based on: the-storages

Description

  • Vue plugins

  • Support Vue2, vue3, and Vue-Cli project

  • Multi-page data binding and sync.

  • Provide storage change event listeners.

  • Various calling methods.

  • Automatic JSON parsing.

  • Mainly written using es6 and proxy.

Simple Demos:

You can open multiple pages at the same time and experience data binding between multiple pages

Usage:

vue-the-storages

    1. install
npm i vue-the-storages
    1. use

main.js (registered)

import vueTheStorages from 'vue-the-storages'
 
// vue2
Vue.use(vueTheStorages)
 
// vue3 (just use)
createApp(App).use(vueTheStorages).mount('#app')
 

Default global names:

$localData (localStorage mirror object)
$local (localStorage proxy object)

$sessionData (sessionStorage mirror object)
$session (sessionStorage proxy object)

You can pass in options when registering to modify the global name:

import vueTheStorages from 'vue-the-storages'
 
// default, you can modify
const vueTheStoragesOptions = {
  localMirrorKey: '$localData',
  localStorageKey: '$local',
 
  sessionMirrorKey: '$sessionData',
  sessionStorageKey: '$session',
  
  options: {
    vueModule: null,
    strict: true,
    mirrorOperation: false,
    updateMirror: true
  }
}
 
// vue2
Vue.use(vueTheStorages, vueTheStoragesOptions)
 
// vue3 (just use)
createApp(App).use(vueTheStorages, vueTheStoragesOptions).mount('#app')

App.vue or any components (test)

<template>
    <div>
        <div>{{ $localData }}</div>
        <div>{{ $local }}</div>
        <button @click="test">test</button>
    </div>
</template>
 
<script>
export default {
    methods: {
        test() {
            this.$local.set('hello', { message: 'halo' })
            // the same:
            // this.$local.hello = { message: 'halo' }
            // this.$local.hello.message 'halo'
        }
    }
}
</script> 

↑ The above is the usage of vue plugin

All APIs are completely consistent, you can refer to

Read Samples

Read Docs

↓ Below is the description of the-storages

Import:

// npm i the-storages
import { createLocal, createSession } from 'the-storages'
 
const mirror = createLocal() // create localStorage; createSession is sessionStorage
const storage = mirror._prx 
 
console.log(storage, mirror)
storage.set('hello', 'world')
console.log(storage, mirror)
 

Vue-Cli: vue-the-storages

Vue (common):

See index.html for details (vue3). vue2.html, vue2_zh.html

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- storages test page for vue2 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>the-storages | vue2</title>
  <script src="https://unpkg.com/vue"></script> 
</head>
 
<body>
  <div id="app">
    <h1>the-storage | vue2</h1>
    <div>storageData (storage mirror object): {{ storageData }}</div>
    <div>storageProxyObj (storage proxy object): {{ storageProxyObj }}</div>
    <div>
      <button @click="test">click me, set a message</button>
    </div>
  </div>
  
  <script>
  import { createLocal, createSession, createStorage } from 'the-storages'
 
  // create storage mirror object (localStorage)
  // mirror object used for data binding, get data
  const mirror = createLocal() 
 
  // storage proxy object (enhanced storage)
  // used to operate storage
  const storage = mirror._prx 
 
  new Vue({
    el: '#app',
    data() {
      return {
        // the mirror object can make the data update automatically
        // so it's more suitable for obtaining storage data
        storageData: mirror,
 
        // the storage proxy object has all the methods and features 
        // (but it is not recommended to put it directly into the view)
        // so it's more suitable for storage operation
        storage: storage
      }
    },
    created() {
      // ensure that the storage data on the view can be updated automatically
      this.storage.bindVm(this)
    
      console.log(this.storageData)
      this.storage.set('hello', 'firstData')
      console.log(this.storageData)
    },
    methods: {
      test () {
        this.storage.set('foo', { bar: 1 })
      }
    }
  })
 
  </script> 
</body>
 
</html>

Samples:

// set data to localStorage
storage.set('test', { message: 'im an object' }) // set a object
storage.setItem('test2', 'hello2') // set a string
storage.test3 = { hello111: 'im an object too' } // set a object
 
// set multiple data to localStorage
storage.set(['a','b','c'], [1,2,'g']) // parameter [keys ... ]:[values... ]
storage.set({a: 1, b: 2, c: 'g'}) // { key1: value1, key2: value2 ... }
 
// set data to localStorage, recursive creation
storage.a.b.c.d.e = 'test' 
storage.setChain('aa.bb.cc.dd', 'testChain')
 
// each sync method has a sync copy method
storage.setAsync('async foo', 'bar').then(res => { console.log('set async complete') })
storage.setChainAsync('gg.ee.rr', 'haha').then(res => { console.log('set asyncChain complete') })
 
 
// get data from localStorage
storage.get('test') // will get object
 
console.log(storage.test) // the same
storage.getItem('test') // the same
localStorage.getItem('test') // the same
 
storage.get('test', false) // will get json string
 
// get multiple results
storage.get(['test', 'test2', 'test3']) // will get object { key1: value1, key2: value2 ... }
 
// recursive acquisition
storage.getChain('a.b.c.d.e')
storage.a.b.c.d.e
 
// each sync method has a sync copy method
storage.getAsync('test').then(res => { console.log(res) })
 
// remove key from localStorage
storage.remove('test') // none return
storage.remove('test', true) // will return test's value
storage.pop('test') // the same
 
// watchers
// active: events triggered by the current page
storage.watchActive('get', e => { console.log(e) })
 
// passive: events triggered by the other page
storage.watchPassive('set', e => { console.log(e) })
 
// valid events
console.log(storage._activeEvents) // active events
console.log(storage._passiveEvents) // passive events
 
// unwatch
storage.unwatchActive('get')
storage.unwatchPassive('get')

Docs:

Some docs here...

import { createLocal, createSession, Storage } from 'the-storages'
 
const mirror = createLocal() // create localStorage; createSession is sessionStorage
const storage = mirror._prx  // storage proxy

  • ### createLocal

    create enhanced localStorage
    only localstorage supports multi-page data binding

    createLocal(options)

    ##### options: Object

    Default options

    {
        vueModule: null,
        strict: true,
        mirrorOperation: false,
        updateMirror: true
    }

  • ### createSession

    create enhanced sessionStorage Since the session of each page is independent, multi-page data binding is not supported

    createSession(options)

    ##### options: Object

    Default options: same

storage (proxy) object methods

  • ### getItem

    get item from storage

    storage.getItem(key, parse = true)

    ##### key: String, Array

    if key is an Array, get multiple, return object. ##### parse: Boolean if parse, try to return JSON.parse(result)

  • ### get

    Shorthand method name for getItem

    storage.get(key, parse = true)

  • ### getAsync

    Asynchronous method of getItem

    storage.getAsync(...args).then(res => {})

  • ### setItem

    set item from storage

    storage.setItem(key, value)

    ##### key: String, Array, Object

    If both key and value are array types, set multiple. [...keys] -> [...values]
    If key is an Object, set multiple. { key1: value1, key2: value2 } ##### value: Any The value will fix with JSON.stringify

  • ### set

    Shorthand method name for setItem

    storage.set(key, value)

  • ### setAsync

    Asynchronous method of setItem

    storage.setAsync(...args).then(res => {})

  • ### removeItem

    remove item from storage

    storage.removeItem(key, pop = false)

    ##### key: String, Array

    If key is an Array, remove multiple keys. ##### pop: Boolean If pop, removeItem will return the deleted value

  • ### remove

    Shorthand method name for removeItem

    storage.remove(key, pop = false)

  • ### removeAsync

    Asynchronous method of removeItem

    storage.removeAsync(...args).then(res => {})

  • ### clear

    clear the storage

    storage.clear()

  • ### clearAsync

    Asynchronous method of clear

    storage.clearAsync().then(res => {})

  • ### setChain

    Set storage data recursively, try not to overwrite the attributes on the chain.

    storage.setChain(keyChain, value)

    ##### keyChain: String

    sample: storage.setChain('a.b.c.d.e', 1) == (storage.a.b.c.d.e = 1) ##### value: Any Value will be set on the last object of keyChain

  • ### setChainAsync

    Asynchronous method of setChain

    storage.setChainAsync(...args).then(res => {})

  • ### getChain

    Get storage data recursively, will get the value of the last object on keyChain.

    storage.setChain(keyChain, value)

    ##### key: String

    sample: storage.getChain('a.b.c.d.e') == storage.a.b.c.d.e

    • ### setChainAsync

    Asynchronous method of getChain

    storage.getChainAsync(...args).then(res => {})

  • ### watch

    Add a listener for the specified type of storage change event

    storage.watch(triggerType, eventType, handler)

    ##### triggerType: String

    Must be 'active' or 'passive'.
    active: events triggered by the current page
    passive: events triggered by the other page ##### eventType: String Add handler function for specified event.
    active: must in ["get", "set", "remove", "pop", "clear"]
    passive: must in ["set", "remove", "clear"] ##### handler: Function Handler will receives a parameter: event

  • ### watchActive

    Asynchronous method of watch, triggerType is 'active'

    storage.watchActive(eventType, handler)

  • ### watchPassive

    Asynchronous method of watch, triggerType is 'passive'

    storage.watchPassive(eventType, handler)

  • ### unwatch

    Remove listener for the specified type of storage change event

    storage.unwatch(triggerType, eventType)

    ##### triggerType: String

    Must be 'active' or 'passive'.
    active: events triggered by the current page
    passive: events triggered by the other page ##### eventType: String Remove listener for specified event.
    active: must in ["get", "set", "remove", "pop", "clear"]
    passive: must in ["set", "remove", "clear"]

  • ### unwatchActive

    Asynchronous method of unwatch, triggerType is 'active'

    storage.unwatchActive(eventType)

  • ### watchPassive

    Asynchronous method of unwatch, triggerType is 'passive'

    storage.unwatchPassive(eventType)

  • ### bindVm

    Binding the Vue module (instance) object to ensure that the Vue view can be updated.

    storage.bindVm(vueModule)

    ##### vueModule: Vue instance

    Equivalent to "this" in the vue instance.
    Please call this function to bind "this" when the page is initialized.

  • ### toString

    return storage data as JSON string

    storage.toString()

  • ### _data

    return storage data as Object

    storage._data()

Storage constructor methods

const _Storage = new Storage()

  • ### create

    create and return an enhanced storage mirror object. 

    _Storage.create(type, options)

    ##### type: String

    must be 'localStorage' or 'sessionStorage'. ##### options: Object Please see the default options of createLocal

  • ### _asyncWrapper

    Convert sync functions to async functions and return

    _Storage._asyncWrapper(func)

    ##### func: Function

    sync functions

  • ### _createObject

    Create Object through Array

    _Storage._asyncWrapper(list, defaultValue = null))

    ##### list: Array

    keys Array ##### defaultValue: any every key's value

  • ### _notNull

    is val === null || undefined || nan ?

    _Storage._notNull(val)

    ##### val: any

  • ### _parse

    Try to parse the JSON string (return the original value if it fails)

    _Storage._parse(value)

    ##### value: any

  • ### _stringify

    Try to stringify the value (return the original value if it fails)

    _Storage._stringify(value)

    ##### value: any

  • ### _zip

    Compress two Arrays into an object corresponding to a key value

    _Storage._zip(array1, array2)

    ##### array1: Array

    keys Array ##### array2: Array values Array

Development / test

You are willing to help me improve this project. Or you need to do some testing.

1. Clone this repository

git clone https://github.com/Pure-Peace/the-storages

2. Installation dependencies

npm i

3. Start

npm run dev

4. Open the test page (Default port is 8080)

I provide two sample pages: vue.js 3 and vue.js 2 (CDN unpkg.com)

You can open two pages to experience multi-page data binding and data synchronization.

vue.js 3
http://localhost:8080
vue.js 2
http://localhost:8080/vue2
vue.js 2 中文版页面
http://localhost:8080/vue2_zh

Snowpack

It is recommended to use snowpack to run or build (instead of webpack with babel, beacuse snowpack natively supports es6, and faster)

MIT

Readme

Keywords

Package Sidebar

Install

npm i vue-the-storages

Repository

github.com/pure-peace/vue-the-storages

Homepage

github.com/pure-peace/vue-the-storages#readme

Weekly Downloads

41

Version

1.0.2

License

MIT

Unpacked Size

18.2 kB

Total Files

4

Last publish

Collaborators

  • purepeace
Try on RunKit
Report malware