Enhanced, Support Data Binding LocalStorage and SessionStorage


Enhanced, Support data binding localStorage and sessionStorage.

provide various api (async/sync methods) and storage event listeners.

In addition to supporting general use, support for Vue data binding and even multi-page data binding and sync.


  • Support Vue2, vue3, and Vue-Cli project

  • Support Nuxt.js

  • Multi-page data binding and sync.

  • Provide storage change event listeners.

  • Various calling methods.

  • Automatic JSON parsing.

  • Support Vue2, vue3

  • Mainly written using es6 and proxy.

Simple Demos:

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


Install first:

npm i the-storages


// 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: please use vue-the-storages

Vue (common):

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

<!DOCTYPE html>
<html lang="en">
  <!-- 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>

  <div id="app">
    <h1>the-storage | vue2</h1>
    <div>storageData (storage mirror object): {{ storageData }}</div>
    <div>storageProxyObj (storage proxy object): {{ storageProxyObj }}</div>
      <button @click="test">click me, set a message</button>

  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.set('hello', 'firstData')
    methods: {
      test () {
        this.storage.set('foo', { bar: 1 })




// 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

// 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


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

    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

    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

  • 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’

  • watchPassive

    Asynchronous method of unwatch, triggerType is ‘passive’

  • bindVm

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

    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

  • _data

    return storage data as Object


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

    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 ?

    val: any
  • _parse

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

    value: any
  • _stringify

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

    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

vue.js 2

vue.js 2 中文版页面


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

Download Details:

Author: pure-peace

Source Code: https://github.com/pure-peace/the-storages

#vue #vuejs #javascript

What is GEEK

Buddha Community

Enhanced, Support Data Binding LocalStorage and SessionStorage
Siphiwe  Nair

Siphiwe Nair


Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Gerhard  Brink

Gerhard Brink


Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.


As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).

This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Cyrus  Kreiger

Cyrus Kreiger


How Has COVID-19 Impacted Data Science?

The COVID-19 pandemic disrupted supply chains and brought economies around the world to a standstill. In turn, businesses need access to accurate, timely data more than ever before. As a result, the demand for data analytics is skyrocketing as businesses try to navigate an uncertain future. However, the sudden surge in demand comes with its own set of challenges.

Here is how the COVID-19 pandemic is affecting the data industry and how enterprises can prepare for the data challenges to come in 2021 and beyond.

#big data #data #data analysis #data security #data integration #etl #data warehouse #data breach #elt

Macey  Kling

Macey Kling


Applications Of Data Science On 3D Imagery Data

CVDC 2020, the Computer Vision conference of the year, is scheduled for 13th and 14th of August to bring together the leading experts on Computer Vision from around the world. Organised by the Association of Data Scientists (ADaSCi), the premier global professional body of data science and machine learning professionals, it is a first-of-its-kind virtual conference on Computer Vision.

The second day of the conference started with quite an informative talk on the current pandemic situation. Speaking of talks, the second session “Application of Data Science Algorithms on 3D Imagery Data” was presented by Ramana M, who is the Principal Data Scientist in Analytics at Cyient Ltd.

Ramana talked about one of the most important assets of organisations, data and how the digital world is moving from using 2D data to 3D data for highly accurate information along with realistic user experiences.

The agenda of the talk included an introduction to 3D data, its applications and case studies, 3D data alignment, 3D data for object detection and two general case studies, which are-

  • Industrial metrology for quality assurance.
  • 3d object detection and its volumetric analysis.

This talk discussed the recent advances in 3D data processing, feature extraction methods, object type detection, object segmentation, and object measurements in different body cross-sections. It also covered the 3D imagery concepts, the various algorithms for faster data processing on the GPU environment, and the application of deep learning techniques for object detection and segmentation.

#developers corner #3d data #3d data alignment #applications of data science on 3d imagery data #computer vision #cvdc 2020 #deep learning techniques for 3d data #mesh data #point cloud data #uav data

Uriah  Dietrich

Uriah Dietrich


What Is ETLT? Merging the Best of ETL and ELT Into a Single ETLT Data Integration Strategy

Data integration solutions typically advocate that one approach – either ETL or ELT – is better than the other. In reality, both ETL (extract, transform, load) and ELT (extract, load, transform) serve indispensable roles in the data integration space:

  • ETL is valuable when it comes to data quality, data security, and data compliance. It can also save money on data warehousing costs. However, ETL is slow when ingesting unstructured data, and it can lack flexibility.
  • ELT is fast when ingesting large amounts of raw, unstructured data. It also brings flexibility to your data integration and data analytics strategies. However, ELT sacrifices data quality, security, and compliance in many cases.

Because ETL and ELT present different strengths and weaknesses, many organizations are using a hybrid “ETLT” approach to get the best of both worlds. In this guide, we’ll help you understand the “why, what, and how” of ETLT, so you can determine if it’s right for your use-case.

#data science #data #data security #data integration #etl #data warehouse #data breach #elt #bid data