{"id":17034025,"url":"https://github.com/dreambo8563/vue-storage-watcher","last_synced_at":"2025-07-22T13:34:12.149Z","repository":{"id":34072144,"uuid":"168506453","full_name":"dreambo8563/vue-storage-watcher","owner":"dreambo8563","description":"a reactive storage plugin for vue 👀🔭","archived":false,"fork":false,"pushed_at":"2024-10-21T05:39:36.000Z","size":1787,"stargazers_count":59,"open_issues_count":32,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-03T01:43:26.469Z","etag":null,"topics":["localstorage","reactive","sessionstorage","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/dreambo8563.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2019-01-31T10:26:29.000Z","updated_at":"2025-02-28T03:02:39.000Z","dependencies_parsed_at":"2025-01-17T01:16:40.893Z","dependency_job_id":null,"html_url":"https://github.com/dreambo8563/vue-storage-watcher","commit_stats":{"total_commits":91,"total_committers":7,"mean_commits":13.0,"dds":"0.23076923076923073","last_synced_commit":"b4e88dfa4fda0d7beed6a0d07889e9cde0bb1079"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/dreambo8563/vue-storage-watcher","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-storage-watcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-storage-watcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-storage-watcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-storage-watcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreambo8563","download_url":"https://codeload.github.com/dreambo8563/vue-storage-watcher/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fvue-storage-watcher/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266506179,"owners_count":23940019,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["localstorage","reactive","sessionstorage","typescript","vue"],"created_at":"2024-10-14T08:37:13.097Z","updated_at":"2025-07-22T13:34:12.112Z","avatar_url":"https://github.com/dreambo8563.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["Utilities","Persistence"],"readme":"[![Codacy Badge](https://api.codacy.com/project/badge/Grade/3b39774059a445f19dcccc5d5ba01a23)](https://app.codacy.com/app/dreambo8563/vue-storage-watcher?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=dreambo8563/vue-storage-watcher\u0026utm_campaign=Badge_Grade_Dashboard)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n[![Build Status](https://travis-ci.com/dreambo8563/vue-storage-watcher.svg?branch=master)](https://travis-ci.com/dreambo8563/vue-storage-watcher) [![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/vue-storage-watcher.svg)](https://greenkeeper.io/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/vue-storage-watcher/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/vue-storage-watcher?targetFile=package.json)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-storage-watcher.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-storage-watcher?ref=badge_shield)\n![npm type definitions](https://img.shields.io/npm/types/vue-storage-watcher.svg?style=flat)\n![npm](https://img.shields.io/npm/dt/vue-storage-watcher.svg?style=flat)\n\n# vue-storage-watcher\n\n## For Vue3 =\u003e https://github.com/dreambo8563/next-vue-storage-watcher\n![](https://raw.githubusercontent.com/dreambo8563/static-assets/master/watcher1.png)\n\nthe real reactive watcher for localStorge.\nI search a few days for a lib to watch the ls, but failed.\n\nyou can use this tiny ls wrapper which works well with vue.js.\n\nyou can use this as persistent data layer even instead of vuex.\n\n- familiar usage just like **bus**.\n- reactive\n- type supported\n- small size\n\nTODO:\n\n- [x] support sessionStorage\n- [x] logo design\n- [x] ttl method like redis to get remaining lifetime in ms\n- [ ] show usage with github pages maybe\n\n### Install\n\n\u003e npm install vue-storage-watcher --save\n\n### Sample\n\n```js\nimport lsWatcher from 'vue-storage-watcher';\n\nVue.use(lsWatcher, { prefix: 'myproject_' });\n```\n\n\u003e storage type\n\n- localStorage\n- sessionStorage\n\n### Options\n\n- prefix =\u003e default is \"\"\n- storage =\u003e default is \"local\" which means window.localStorage will be used as Storage Object. Another alternative is \"session\"\n\n### Methods\n\nthis.\\$ls or this.\\$ss in Component context for localStorage/sessionStorage\nVue.\\$ls or Vue.\\$ss in global.\n\n\u003e I will list basic api just with ls.\n\n#### set\n\n```js\nthis.$ls.set('token', 'abccc');\n```\n\nthe value will be saved in storage with the **prefix** + key\nand emit the changes to all the subscribers.\n\n\u003e you also can give the key an expire duration with the unit of ms\n\n```js\nthis.$ls.set('token', 'abccc', 3000);\n```\n\nthe key will be expried in 3s, you will get null after that.\n\n#### ttl\n\nttl will return **-1** if one of the following scenarios happen:\n\n- the key is non-exist\n- the key is already expired\n- the key has no expire time\n\nelse return the remaining lifetime with ms as the unit\n\n```js\nthis.$ls.ttl('token');\n```\n\n#### get\n\n```js\nthis.$ls.get('token', 'default');\n```\n\nget the value with a default return value if it's not existed\n\n#### keys\n\n```js\nthis.$ls.keys();\n```\n\nget all keys stored in the storage.\n\n#### subscribe the key\n\n```js\nthis.$ls.on('token', callback);\n```\n\nsubscribe the key in the storage, will trigger the callback function if any changes happen.\n\nthe return value is the handler need to be used to unsubscribe\n\n\u003e tricky\n\u003e there is an immediate options as a third args which will trigger cb immediate if set **true**\n\n```js\nthis.$ls.on('token', callback, true);\n```\n\n#### unsubscribe the key\n\n```js\nconst handler = this.$ls.on('token', cb);\nthis.$ls.off('token', handler);\n```\n\n\u003e please make sure you unsubscribe beforeDestroy the component\n\n#### remove\n\n```js\nthis.$ls.remove('token');\n```\n\nremove will delete the key in storage and emit all the subscribers with **null** value\n\n#### clear\n\n```js\nthis.$ls.clear();\n```\n\ndelete all the keys with your **prefix**. and all the subscribers will **not** receive changes any more\n\n#### init\n\n```js\nthis.$ls.init();\n```\n\ninit will set all your current localStorge keys into the plugins\n\n- add prefix for all the keys\n\nand then you can use **get** and **on** mehtod to make them reactive\n\n### FAQ\n\n- if you want to using localStorage and sessionStorage at same page, pls use the plugin as following\n\n```js\nimport lsWatcher from 'vue-storage-watcher';\n\nVue.use({ ...lsWatcher }, { prefix: 'myproject_' });\n\nVue.use({ ...lsWatcher }, { prefix: 'myproject_ss_', storage: 'session' });\n```\n\n- possibly polyfill\n\n```js\n// wather polyfill for IE 11\nimport 'core-js/fn/symbol';\nimport 'core-js/fn/map';\n```\n\n- possibly polyfill\n\n```js\n// wather polyfill for IE 11\nimport \"core-js/fn/symbol\"\nimport \"core-js/fn/map\"\n```\n\n## License\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-storage-watcher.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fdreambo8563%2Fvue-storage-watcher?ref=badge_large)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/6948318?v=4\" width=\"100px;\" alt=\"Vincent Guo\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVincent Guo\u003c/b\u003e\u003c/sub\u003e](https://dreambo8563.github.io/)\u003cbr /\u003e[💻](https://github.com/dreambo8563/vue-storage-watcher/commits?author=dreambo8563 \"Code\") [📖](https://github.com/dreambo8563/vue-storage-watcher/commits?author=dreambo8563 \"Documentation\") [🐛](https://github.com/dreambo8563/vue-storage-watcher/issues?q=author%3Adreambo8563 \"Bug reports\") |\n| :---: |\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Fvue-storage-watcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreambo8563%2Fvue-storage-watcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Fvue-storage-watcher/lists"}