{"id":22486284,"url":"https://github.com/zh-rocco/vue-auto-storage","last_synced_at":"2025-08-02T19:31:23.199Z","repository":{"id":37773890,"uuid":"141308069","full_name":"zh-rocco/vue-auto-storage","owner":"zh-rocco","description":":beers: An automatic storage plugin for Vue2, persist the data with localStorage.","archived":false,"fork":false,"pushed_at":"2023-02-16T02:44:44.000Z","size":1257,"stargazers_count":83,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-06T17:15:40.317Z","etag":null,"topics":["autosave","autostore","persistence","persistent-storage","vue-plugin"],"latest_commit_sha":null,"homepage":"https://zh-rocco.github.io/vue-auto-storage/","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/zh-rocco.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-07-17T15:21:38.000Z","updated_at":"2024-02-28T15:04:14.000Z","dependencies_parsed_at":"2024-12-06T17:15:43.919Z","dependency_job_id":"5a501885-613d-4dac-9177-3cc1bd363275","html_url":"https://github.com/zh-rocco/vue-auto-storage","commit_stats":{"total_commits":106,"total_committers":2,"mean_commits":53.0,"dds":0.05660377358490565,"last_synced_commit":"6220c4d96863058266f6bfdc32cfc6772ead80f2"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/zh-rocco/vue-auto-storage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zh-rocco%2Fvue-auto-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zh-rocco%2Fvue-auto-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zh-rocco%2Fvue-auto-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zh-rocco%2Fvue-auto-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zh-rocco","download_url":"https://codeload.github.com/zh-rocco/vue-auto-storage/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zh-rocco%2Fvue-auto-storage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268440323,"owners_count":24250772,"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-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["autosave","autostore","persistence","persistent-storage","vue-plugin"],"created_at":"2024-12-06T17:14:16.460Z","updated_at":"2025-08-02T19:31:22.935Z","avatar_url":"https://github.com/zh-rocco.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# vue-auto-storage\n\n\u003e An automatic storage plugin for Vue2, persist the data with localStorage.\n\n[![vue-js](https://img.shields.io/badge/vue.js-2.x-brightgreen.svg?maxAge=604800)](https://vuejs.org/)\n[![downloads](https://img.shields.io/npm/dt/vue-auto-storage.svg)](http://npm-stats.com/~packages/vue-auto-storage)\n[![GitHub stars](https://img.shields.io/github/stars/zh-rocco/vue-auto-storage.svg)](https://github.com/zh-rocco/vue-auto-storage/stargazers)\n[![devDependencies](https://img.shields.io/david/dev/zh-rocco/vue-auto-storage.svg)](https://david-dm.org/zh-rocco/vue-auto-storage?type=dev)\n[![npm-version](https://img.shields.io/npm/v/vue-auto-storage.svg?maxAge=3600)](https://www.npmjs.com/package/vue-auto-storage)\n[![Github tag](https://img.shields.io/github/tag/zh-rocco/vue-auto-storage.svg?maxAge=3600)](https://github.com/zh-rocco/vue-auto-storage/)\n[![Build Status](https://travis-ci.org/zh-rocco/vue-auto-storage.svg?branch=master)](https://travis-ci.org/zh-rocco/vue-auto-storage)\n[![GitHub license](https://img.shields.io/github/license/zh-rocco/vue-auto-storage.svg)](https://github.com/zh-rocco/vue-auto-storage/blob/master/LICENSE)\n\n## Demo\n\n[Try it out](https://zh-rocco.github.io/vue-auto-storage/)\n\n## Requirements\n\n- [`Vue.js 2.x`](https://cn.vuejs.org/)\n- `IE9 +`\n\n## Advantages\n\n- Simple API.\n- Small bundle size: 3.86KB (1.42KB gzipped).\n- No dependencies.\n\n## Attention\n\nObey the following:\n\n- Vue component must has a unique `name` field.\n- The target component can't used multiple times, eg: not used by `v-for`.\n\n## Installation\n\n```bash\nyarn add vue-auto-storage\n```\n\n## Usage\n\n### Registration\n\nmain.js\n\n```javascript\nimport Vue from \"vue\";\nimport App from \"./App.vue\";\nimport AutoStorage from \"vue-auto-storage\";\n\nVue.use(AutoStorage);\n\n// or with options\n\n// Vue.use(AutoStorage, { debounce: 100 });\n\nnew Vue({\n  render: (h) =\u003e h(App),\n}).$mount(\"#app\");\n```\n\n### Example\n\nAdd `autoStorage` filed to Vue component's options object, declare the keypath of `data` you want to persist.\n\n```javascript\nexport default {\n  name: \"ComponentName\",\n\n  autoStorage: [\"a.b\", \"c.0.d\", \"f\"],\n\n  data() {\n    return {\n      a: { b: \"\" },\n\n      c: [{ d: \"\" }, { e: \"\" }],\n\n      f: \"\",\n    };\n  },\n\n  created() {},\n};\n```\n\nUse in TypeScript:\n\n```typescript\nimport { Component, Vue } from \"vue-property-decorator\";\n\n@Component({\n  autoStorage: [\"a.b\", \"c.0.d\", \"f\"],\n})\nexport default class MyComponent extends Vue {\n  private a = { b: \"\" };\n  private c = [{ d: \"\" }, { e: \"\" }];\n  private f = \"\";\n}\n```\n\n~~If you want persist an array's first item, use `array.0` instead of `array[0]`, [why?](https://github.com/vuejs/vue/blob/653aac2c57d15f0e93a2c1cc7e6fad156658df19/src/core/observer/watcher.js#L86-L89)~~\n\n## Methods\n\n| Function   | Description                                                   | Parameters Type | Example                          |\n| :--------- | :------------------------------------------------------------ | :-------------- | :------------------------------- |\n| clear(key) | Clear storage. If no parameters, clear all AutoStorage cache. | `String`, `N/A` | `this.$autoStorage.clear(\"a.b\")` |\n\n## Plugin Configurations\n\n| Property | Description                                | Type                                                                                             | Default        |\n| :------- | :----------------------------------------- | :----------------------------------------------------------------------------------------------- | :------------- |\n| debounce | Debounce time of watchers, unit: `ms`.     | `Number`                                                                                         | 300            |\n| storage  | Any object following the Storage protocol. | `Object` [more](https://github.com/zh-rocco/vue-auto-storage/blob/master/types/index.d.ts#L1-L6) | `localStorage` |\n\nStay tuned for more configurations.\n\n## Development\n\n```bash\nyarn dev\n```\n\n## Build\n\n```bash\nyarn build:lib\n```\n\n## Test\n\n```bash\nyarn test\n```\n\n## Todo Features\n\n- Support Vuex.\n\n## License\n\nMIT © [zh-rocco](https://github.com/zh-rocco)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzh-rocco%2Fvue-auto-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzh-rocco%2Fvue-auto-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzh-rocco%2Fvue-auto-storage/lists"}