responsive-storage

English | 简体中文

🤔 Original intention of development

• In some scenarios, we need to store some variables and keep it responsive, there are many solutions, such as vuex, pinia, but they disappear after refreshing the page, in some cases I want them to exist locally without losing responsiveness, so was born responsive-storage

🚀 Features

• ⚡ Strong compatibility: supports both vue2 and vue3, no need to install additional dependencies
• ⚡ Fully tree-shaking: Comes with Tree-shaking, only packages the imported code
• 🧪 Complete example: Currently we have added vue2, vue3 examples in the playgrounds folder , zero learning usage cost
• 🦾 Extremely Light: The source code size is 1.76 KB, and the footprint of the package size in the project is only calculated in bits

📦 install

npm install responsive-storage
or
pnpm add responsive-storage

🦄 Usage

vue2

• main.js

import Storage from "responsive-storage";
Vue.use(Storage, {
  // must pass
  version: 2, 
  // Namespace, optional, default `rs-` (not recommended if there is no special requirement)
  nameSpace: "xx_", 
  // The responsive object that needs to be stored (it should be noted here that if nameSpace is passed, the second parameter of the Storage.getData method must be passed and the value of nameSpace must be the same. If nameSpace is not passed, the second parameter of Storage.getData method parameters can be omitted) 
  memory: {
    starValue: Storage.getData("starValue", 'xx_') ?? 1
  }
});

Click to view the specific usage

vue3

• main.ts

import { createApp } from "vue";
import App from "./App.vue";

import Storage from "responsive-storage";
const app = createApp(App);

app.use(Storage, {
  memory: {
    starValue: Storage.getData("starValue") ?? 1
  }
});

Click to view the specific usage

License

MIT © xiaoxian521-2022