{"id":21971781,"url":"https://github.com/cristopher1/vue-localstorage-reactive","last_synced_at":"2026-05-17T18:02:47.188Z","repository":{"id":189216788,"uuid":"679499522","full_name":"cristopher1/vue-localstorage-reactive","owner":"cristopher1","description":"Wrapper to use localStorage reactive in Vue 3","archived":false,"fork":false,"pushed_at":"2023-10-28T04:08:01.000Z","size":414,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T07:40:01.745Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@cljimenez/vue-localstorage-reactive","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cristopher1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-17T01:47:59.000Z","updated_at":"2023-11-06T17:00:04.000Z","dependencies_parsed_at":"2024-10-14T05:33:26.942Z","dependency_job_id":"3ce8a169-2e52-4948-8e93-9e3a261a0e5d","html_url":"https://github.com/cristopher1/vue-localstorage-reactive","commit_stats":{"total_commits":161,"total_committers":1,"mean_commits":161.0,"dds":0.0,"last_synced_commit":"a2a46ec9be70b0f3c73382f6ae84c0d53e2b3dad"},"previous_names":["cristopher1/vue-localstorage-reactive"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue-localstorage-reactive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue-localstorage-reactive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue-localstorage-reactive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristopher1%2Fvue-localstorage-reactive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cristopher1","download_url":"https://codeload.github.com/cristopher1/vue-localstorage-reactive/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245031519,"owners_count":20549925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T14:55:50.074Z","updated_at":"2026-05-17T18:02:42.135Z","avatar_url":"https://github.com/cristopher1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eWelcome to @cljimenez/vue-localstorage-reactive 👋\u003c/h1\u003e\n\u003cp\u003e\n  \u003cimg alt=\"Version\" src=\"https://img.shields.io/badge/version-1.0.1-blue.svg?cacheSeconds=2592000\" /\u003e\n  \u003ca href=\"https://github.com/cristopher1/vue-localstorage-reactive#readme\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/cristopher1/vue-localstorage-reactive/graphs/commit-activity\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/cristopher1/vue-localstorage-reactive/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/cristopher1/vue-localstorage-reactive\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Wrapper to use localStorage reactive in Vue 3\n\n### Note: All reactiveLocalStorage object created by this plugin uses the same localStorage object, therefore when you creates a vue project with many instance of application (created by createApp function) and you installs this plugin in two or more instances, it will occur side effects when the setItem or removeItem methods are called using the same key in differents instance of the reactiveLocalStorage object.\n\nExample:\n\n```js\nimport { createReactiveLocalStorageInstaller } from '@cljimenez/vue-localstorage-reactive'\n\nimport { createApp } from 'vue'\n\nimport App from './App.vue'\n\nconst app1 = createApp(App)\nconst app2 = createApp(App)\n\napp1.use(createReactiveLocalStorageInstaller())\napp2.use(createReactiveLocalStorageInstaller())\n\n// Saves the user object into localStorage using the pair 'user' / objectUser\napp1.config.globalProperties.$reactiveLocalStorage.setItem('user', objectUser)\n\n// Saves the user object into localStorage using the pair 'user' / objectUser. The objectUser saved by app1 is overwritten by app2.\napp2.config.globalProperties.$reactiveLocalStorage.setItem('user', objectUser)\n```\n\n### If you want use this plugin in many application instance, the keys used by the differents application instances should be unique.\n\nExample:\n\n```js\nimport { createReactiveLocalStorageInstaller } from '@cljimenez/vue-localstorage-reactive'\n\nimport { createApp } from 'vue'\n\nimport App from './App.vue'\n\nconst app1 = createApp(App)\nconst app2 = createApp(App)\n\napp1.use(createReactiveLocalStorageInstaller())\napp2.use(createReactiveLocalStorageInstaller())\n\n// Saves the user object into localStorage using the pair 'app1_user' / objectUser\napp1.config.globalProperties.$reactiveLocalStorage.setItem(\n  'app1_user',\n  objectUser,\n)\n\n// Saves the user object into localStorage using the pair 'app2_user' / objectUser.\napp2.config.globalProperties.$reactiveLocalStorage.setItem(\n  'app2_user',\n  objectUser,\n)\n```\n\n### 🏠 [Homepage](https://github.com/cristopher1/vue-localstorage-reactive#readme)\n\n### [Index](#index)\n\n- [Install](#install)\n- [How to use?](#how-to-use?)\n  - [Install the plugin](#install)\n  - [Install options](#install-options)\n  - [About the ReactiveLocalStorage methods](#about-reactive-local-storage-methods)\n  - [Use the composition API](#composition-api)\n- [Author](#author)\n- [Contributing](#contributing)\n- [License](#license)\n\n## \u003ca id=\"install\"\u003e\u003c/a\u003e Install\n\n```sh\nnpm install @cljimenez/vue-localstorage-reactive\n```\n\n## \u003ca id=\"how-to-use?\"\u003e\u003c/a\u003e How to use?\n\n- ### \u003ca id=\"install\"\u003e\u003c/a\u003e Install the plugin.\n\n  ```js\n  import { createReactiveLocalStorageInstaller } from '@cljimenez/vue-localstorage-reactive'\n\n  import { createApp } from 'vue'\n\n  import App from './App.vue'\n\n  const app = createApp(App)\n\n  app.use(createReactiveLocalStorageInstaller())\n  ```\n\n  **Note: Always you should create a new Installer using createReactiveLocalStorageInstaller when you use the app.use method**\n\n- ### \u003ca id=\"install-options\"\u003e\u003c/a\u003e Install options.\n\n  When you installs this plugin using:\n\n  ```js\n  app.use(createReactiveLocalStorageInstaller(), options)\n  ```\n\n  The options object can contain the following attributes:\n\n  - `useRefStorage`: (boolean). By default is true. When this value is true, the reactiveStorage object is created using `ref` function; otherwise is used the `reactive` function.\n  - `serializer`: (object). By default is undefined. This object is used to serializes and unserializes data to save complex object into localStorage.\n\n    The serializer object contains two methods:\n\n    1.  `serialize(value: any, options?: object)`: Serializes the data.\n    2.  `parse(value: string, options?: object)`: Unserializes the data.\n\n    When the value of `serializer` is undefined, the default serializer used is:\n\n    ```js\n    {\n      serialize: (value, options) =\u003e {\n       const { replacer, space } = options\n       return JSON.stringify(value, replacer, space)\n      },\n      parse: (value, options) =\u003e {\n       const { reviver } = options\n       return JSON.parse(value, reviver)\n      },\n    }\n    ```\n\n    You can define your own serializer wrapping an object or static methods that serializes and unserializes data using the structure:\n\n    ```js\n    {\n      serialize: (value, options) =\u003e {\n        // const {option1, option2, ... etc} = options\n        // return objectThatSerializesData.methodThatSerializesData(value, option1, option2, ... etc)\n      },\n      parse: (value, options) =\u003e {\n        // const {option1, option2, ... etc} = options\n        // return objectThatUnserializesData.methodThatUnserializesData(value, option1, option2, ... etc)\n      }\n    }\n    ```\n\n    You can use serializers like JSON with replacer and reviver functions, [@cljimenez/json-serializer-core](https://www.npmjs.com/package/@cljimenez/json-serializer-core) with [@cljimenez/json-serializer-base-serializers](https://www.npmjs.com/package/@cljimenez/json-serializer-base-serializers), others.\n\n- ### \u003ca id=\"about-reactive-local-storage-methods\"\u003e\u003c/a\u003e About the ReactiveLocalStorage methods\n\n  The `ReactiveLocalStorage` object provides an interface similar to the Storage interface, this methods are:\n\n  - `(getter) length`: Obtains the number of elements saved in reactiveLocalStorage.\n  - `(method) key(index)`: Returns the key in nth position into reactiveLocalStorage.\n  - `(method) getItem(key, parseOptions = {})`: Returns the parsed key's value saved into reactiveLocalStorage.\n  - `(method) setItem(key, item, serializeOptions = {})`: Saves the pair key/value into reactiveLocalStorage.\n  - `(method) removeItem(key)`: Removes the pair key/value from reactiveLocalStorage.\n  - `(method) clear()`: Removes all pairs key/value into reactiveLocalStorage.\n\n  And include others methods:\n\n  - `(getter) reactiveStorage`: Returns the reactiveStorage object used by reactiveLocalStorage instance.\n  - `(method) setLoadDataFromLocalStorageParameters(parameters)`: Sets the parseOptions that will be used to serialize.parse method that will be called into loadDataFromLocalStorage method.\n  - `(method) loadDataFromLocalStorage()`: This method must be used into listener object that listens an event. Sets the data from localStorage into reactiveLocalStorage when the listened event is fired.\n    **When the @cljimenez/vue-localstorage-reactive is installed, it is added a loadDataFromLocalStorageListener that is used when the load event is fired by the window object to load the initial data from\n    localStorage into reactiveStorage. The loadDataFromLocalStorageListener uses the loadDataFromLocalStorage method.**\n\n    ```js\n    return function loadDataFromLocalStorageListener() {\n      reactiveLocalStorage.loadDataFromLocalStorage()\n    }\n    ```\n\n- ### \u003ca id=\"composition-api\"\u003e\u003c/a\u003e Use the composition API:\n\n  You can use the provide / inject functions.\n\n  ```js\n  // main.js\n  import { createReactiveLocalStorageInstaller } from '@cljimenez/vue-localstorage-reactive'\n\n  import { createApp } from 'vue'\n\n  import App from './App.vue'\n\n  const app = createApp(App)\n\n  app.use(createReactiveLocalStorageInstaller())\n\n  app.provide(\n    'reactiveLocalStorage',\n    app.config.globalProperties.$reactiveLocalStorage,\n  )\n  ```\n\n  ```vue\n  // you can use the inject function to access to the reactiveLocalStorage\n  object, for example in a MainNav.vue\n\n  \u003cscript setup\u003e\n  import { inject, computed } from 'vue'\n  import { RouterLink } from 'vue-router'\n  import jwt_decode from 'jwt-decode'\n\n  const urlApp = inject('urlApp')\n  const apis = inject('apis')\n  const reactiveLocalStorage = inject('reactiveLocalStorage')\n\n  const home = {\n    message: 'Inicio',\n    url: { name: urlApp.home.name },\n  }\n  const signUp = {\n    message: 'Registrarse',\n    url: { name: urlApp.signUp.name, hash: urlApp.signUp.hash },\n  }\n  const contact = {\n    message: 'Contacto',\n    url: { name: urlApp.contact.name },\n  }\n  const characteristics = {\n    message: 'Características',\n    url: { name: urlApp.characteristics.name },\n  }\n  const logout = {\n    message: 'Cerrar sesión',\n    url: { name: urlApp.logout.name },\n  }\n\n  const thereIsUser = computed(() =\u003e {\n    return reactiveLocalStorage.getItem(\n      apis.extractorCaracteristicas.storage.accessTokenItem.name,\n    )\n  })\n\n  const obtainInfoUser = computed(() =\u003e {\n    const accessToken = reactiveLocalStorage.getItem(\n      apis.extractorCaracteristicas.storage.accessTokenItem.name,\n    )\n    if (accessToken) {\n      return jwt_decode(accessToken).user_id\n    }\n    return null\n  })\n  \u003c/script\u003e\n\n  \u003ctemplate\u003e\n    \u003c!-- Navigation--\u003e\n    \u003cnav class=\"navbar navbar-expand-lg navbar-dark bg-dark fixed-top\"\u003e\n      \u003cdiv class=\"container px-5\"\u003e\n        \u003cbutton\n          class=\"navbar-toggler\"\n          type=\"button\"\n          data-bs-toggle=\"collapse\"\n          data-bs-target=\"#navbarSupportedContent\"\n          aria-controls=\"navbarSupportedContent\"\n          aria-expanded=\"false\"\n          aria-label=\"Toggle navigation\"\n        \u003e\n          \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n        \u003c/button\u003e\n        \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\"\u003e\n          \u003cul class=\"navbar-nav ms-auto mb-2 mb-lg-0\"\u003e\n            \u003cli v-if=\"thereIsUser\" class=\"nav-item\"\u003e\n              \u003cspan class=\"nav-link\"\n                \u003eRegistrado como: {{ obtainInfoUser }}\u003c/span\n              \u003e\n            \u003c/li\u003e\n            \u003cli v-if=\"thereIsUser\" class=\"nav-item\"\u003e\n              \u003cRouterLink class=\"nav-link\" :to=\"characteristics.url\"\u003e\n                {{ characteristics.message }}\n              \u003c/RouterLink\u003e\n            \u003c/li\u003e\n            \u003cli v-if=\"!thereIsUser\" class=\"nav-item\"\u003e\n              \u003cRouterLink class=\"nav-link\" :to=\"home.url\"\u003e\n                {{ home.message }}\n              \u003c/RouterLink\u003e\n            \u003c/li\u003e\n            \u003cli v-if=\"!thereIsUser\" class=\"nav-item\"\u003e\n              \u003cRouterLink class=\"nav-link\" :to=\"signUp.url\"\u003e\n                {{ signUp.message }}\n              \u003c/RouterLink\u003e\n            \u003c/li\u003e\n            \u003cli class=\"nav-item\"\u003e\n              \u003cRouterLink class=\"nav-link\" :to=\"contact.url\"\u003e\n                {{ contact.message }}\n              \u003c/RouterLink\u003e\n            \u003c/li\u003e\n            \u003cli v-if=\"thereIsUser\" class=\"nav-item\"\u003e\n              \u003cRouterLink class=\"nav-link\" :to=\"logout.url\"\u003e\n                {{ logout.message }}\n              \u003c/RouterLink\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/nav\u003e\n  \u003c/template\u003e\n  ```\n\n  ```js\n  // also you can use the reactiveLocalStorage object with vue-router using the inject function.\n\n  import { createRouter, createWebHistory } from 'vue-router'\n  import { inject } from 'vue'\n  import { urlApp } from '../urlApp'\n  import { apis } from '../apis'\n  import HomeView from '../views/HomeView.vue'\n\n  const logout = (to, from, next) =\u003e {\n    const reactiveLocalStorage = inject('reactiveLocalStorage')\n    reactiveLocalStorage.removeItem(\n      apis.extractorCaracteristicas.storage.accessTokenItem.name,\n    )\n    reactiveLocalStorage.removeItem(\n      apis.extractorCaracteristicas.storage.refreshTokenItem.name,\n    )\n    next({ name: urlApp.home.name })\n  }\n\n  const isAuthenticated = (to, from, next) =\u003e {\n    const reactiveLocalStorage = inject('reactiveLocalStorage')\n    if (\n      reactiveLocalStorage.getItem(\n        apis.extractorCaracteristicas.storage.accessTokenItem.name,\n      )\n    ) {\n      next()\n    } else {\n      next({ name: urlApp.home.name })\n    }\n  }\n\n  const isNotAuthenticated = (to, from, next) =\u003e {\n    const reactiveLocalStorage = inject('reactiveLocalStorage')\n    if (\n      !reactiveLocalStorage.getItem(\n        apis.extractorCaracteristicas.storage.accessTokenItem.name,\n      )\n    ) {\n      next()\n    } else {\n      next({ name: urlApp.principal.name })\n    }\n  }\n\n  const router = createRouter({\n    history: createWebHistory(import.meta.env.BASE_URL),\n    routes: [\n      {\n        path: urlApp.home.path,\n        name: urlApp.home.name,\n        beforeEnter: [isNotAuthenticated],\n        component: HomeView,\n      },\n      {\n        path: urlApp.contact.path,\n        name: urlApp.contact.name,\n        component: () =\u003e import('../views/ContactoView.vue'),\n      },\n      {\n        path: urlApp.information.path,\n        name: urlApp.information.name,\n        beforeEnter: [isNotAuthenticated],\n        component: () =\u003e import('../views/DescripcionView.vue'),\n      },\n      {\n        path: urlApp.login.path,\n        name: urlApp.login.name,\n        beforeEnter: [isNotAuthenticated],\n        component: () =\u003e import('../views/LoginView.vue'),\n      },\n      {\n        path: urlApp.principal.path,\n        name: urlApp.principal.name,\n        beforeEnter: [isAuthenticated],\n        component: () =\u003e import('../views/PrincipalView.vue'),\n      },\n      {\n        path: urlApp.logout.path,\n        name: urlApp.logout.name,\n        beforeEnter: [isAuthenticated, logout],\n      },\n    ],\n    scrollBehavior(to, from, savedPosition) {\n      if (to.hash) {\n        return {\n          el: to.hash,\n          behavior: 'smooth',\n        }\n      } else if (savedPosition) {\n        return savedPosition\n      } else {\n        return { left: 0, top: 0 }\n      }\n    },\n  })\n\n  export default router\n  ```\n\n## \u003ca id=\"author\"\u003e\u003c/a\u003e Author\n\n👤 **Cristopher Jiménez**\n\n- Github: [@cristopher1](https://github.com/cristopher1)\n\n## \u003ca id=\"contributing\"\u003e\u003c/a\u003e 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/cristopher1/vue-localstorage-reactive/issues).\n\n## \u003ca id=\"license\"\u003e\u003c/a\u003e 📝 License\n\nCopyright © 2023 [Cristopher Jiménez](https://github.com/cristopher1).\u003cbr /\u003e\nThis project is [MIT](https://github.com/cristopher1/vue-localstorage-reactive/blob/master/LICENSE) licensed.\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristopher1%2Fvue-localstorage-reactive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcristopher1%2Fvue-localstorage-reactive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristopher1%2Fvue-localstorage-reactive/lists"}