vue-the-storages

v1.0.2

Published

2 years ago

A vue plugin that enhances localStorage/sessionStorage (supports vue2 and vue3). It allows two-way binding of storage data, multi-page data binding, storage event listener, and rich api (async/sync)

Downloads

254

0High
0Medium
0Low

purepeace

localStorage sessionStorage vue3 vue data-binding vue-plugins vue-cli vue-cli-plugin plugins storage listener event async

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)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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

Simple Demos:

the-storages in Vue.js 3

the-storages in Vue.js 2

the-storages in Vue.js 2 zh

Usage:

vue-the-storages

main.js (registered)

Default global names:

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

App.vue or any components (test)

↑ The above is the usage of vue plugin

Read Samples

Read Docs

↓ Below is the description of the-storages

Import:

Vue-Cli: vue-the-storages

Vue (common):

Samples:

Docs:

createLocal

options: Object

createSession

options: Object

storage (proxy) object methods

getItem

key: String, Array

parse: Boolean

get

getAsync

setItem

key: String, Array, Object

value: Any

set

setAsync

removeItem

key: String, Array

pop: Boolean

remove

removeAsync

clear

clearAsync

setChain

keyChain: String

value: Any

setChainAsync

getChain

key: String

setChainAsync

watch

triggerType: String

eventType: String

handler: Function

watchActive

watchPassive

unwatch

triggerType: String

eventType: String

unwatchActive

watchPassive

bindVm

vueModule: Vue instance

toString

_data

Storage constructor methods

create

type: String

options: Object

_asyncWrapper

func: Function