Registry / storage / responsive-storage

responsive-storage

library2.2.0jsnpmunverified

Responsive local storage plugin for Vue 2 and Vue 3 (v2.2.0). Persists reactive state to localStorage with automatic syncing. Supports tree-shaking, custom namespacing, and zero additional dependencies. Lightweight (~1.76 KB source). Differentiator: maintains reactivity across page refreshes without Vuex/Pinia, and works with both Vue major versions. Released under MIT, maintained on GitHub.

storage

npm install responsive-storage

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RESPONSIVE-STORAGE

responsive-storage

storagejavascriptv2.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Storage (default import)

✓ import Storage from 'responsive-storage'

✗ const Storage = require('responsive-storage')

Package uses default export. CommonJS require works but TypeScript may complain about types.

Vue plugin usage

✓ Vue.use(Storage, { version: 2, memory: { ... } })

✗ app.use(Storage, { version: 2 }) // wrong for vue3, no version needed

For Vue 2, pass version: 2. For Vue 3, do not pass version. Vue 3 uses app.use().

Storage.getData

✓ Storage.getData('key', 'namespace')

✗ Storage.getData('key') // missing namespace when custom nameSpace is set in plugin options

Custom nameSpace must match between plugin options and getData call. Default nameSpace is 'rs-'.

Shows how to install the plugin and define reactive local storage items with defaults in Vue 3.

// Vue 3 main.ts import { createApp } from 'vue' import App from './App.vue' import Storage from 'responsive-storage' const app = createApp(App) app.use(Storage, { memory: { count: Storage.getData('count') ?? 0, user: Storage.getData('user') ?? { name: '' } } }) app.mount('#app')

Debug

Known issues

gotchaCustom nameSpace must be consistent between plugin options and Storage.getData calls.

fix

Always use the same nameSpace string in both places, e.g., { nameSpace: 'xx_' } and Storage.getData('key', 'xx_').

affects: >=0.0.0

gotchaVue 2 requires passing version: 2 in options; Vue 3 must NOT pass version.

fix

Conditionally set options based on Vue version: { version: 2, ... } for Vue 2, omit version for Vue 3.

affects: >=0.0.0

gotchaStorage.getData returns undefined if key does not exist; must provide fallback with ?? operator.

fix

Use Storage.getData('key') ?? defaultValue to provide fallback.

affects: >=0.0.0

deprecatedNo known deprecations yet.

fix

N/A

affects: >=2.0.0

Errors

Common errors & fixes

Property 'use' does not exist on type 'typeof import("vue")'.

Using Vue.use(Storage, ...) with Vue 3's createApp pattern.

fix

Use app.use(Storage, ... ) instead of Vue.use().

Uncaught TypeError: Cannot read properties of undefined (reading 'starValue')

Forgetting to provide default value via ?? operator when key does not exist in localStorage.

fix

Use Storage.getData('starValue') ?? defaultValue.

TypeError: Storage.getData is not a function

Importing wrong symbol (default vs named) or using an older version.

fix

Ensure import: import Storage from 'responsive-storage'. If using CommonJS, require('responsive-storage').default.

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

23 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/xiaoxian521/responsive-storage ↗

packageresponsive-storage ↗

homepagehttps://github.com/xiaoxian521/responsive-storage/tree/main/#readme ↗