{"id":19444197,"url":"https://github.com/maple3142/vuejs-storage","last_synced_at":"2025-04-09T18:17:00.452Z","repository":{"id":25307480,"uuid":"103656295","full_name":"maple3142/vuejs-storage","owner":"maple3142","description":"Vue and Vuex plugin to persistence data with localStorage/sessionStorage","archived":false,"fork":false,"pushed_at":"2022-06-17T12:38:13.000Z","size":2275,"stargazers_count":120,"open_issues_count":5,"forks_count":16,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T18:16:55.377Z","etag":null,"topics":["localstorage","persistence","plugin","sessionstorage","storage","vue","vue-plugin","vuejs-storage","vuex"],"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/maple3142.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}},"created_at":"2017-09-15T12:47:26.000Z","updated_at":"2025-02-28T03:02:30.000Z","dependencies_parsed_at":"2022-08-17T22:51:13.651Z","dependency_job_id":null,"html_url":"https://github.com/maple3142/vuejs-storage","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maple3142%2Fvuejs-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maple3142%2Fvuejs-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maple3142%2Fvuejs-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maple3142%2Fvuejs-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maple3142","download_url":"https://codeload.github.com/maple3142/vuejs-storage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248085323,"owners_count":21045139,"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":["localstorage","persistence","plugin","sessionstorage","storage","vue","vue-plugin","vuejs-storage","vuex"],"created_at":"2024-11-10T16:05:31.769Z","updated_at":"2025-04-09T18:17:00.406Z","avatar_url":"https://github.com/maple3142.png","language":"TypeScript","funding_links":[],"categories":["公用事业","Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["坚持","Utilities","Persistence"],"readme":"# vuejs-storage\n\n\u003e Vue.js and Vuex plugin to persistence data with localStorage/sessionStorage\n\n[![npm](https://img.shields.io/npm/v/vuejs-storage.svg?style=flat-square)](https://www.npmjs.com/package/vuejs-storage)\n[![npm](https://img.shields.io/npm/dm/vuejs-storage?style=flat-square)](https://www.npmjs.com/package/vuejs-storage)\n[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/maple3142/vuejs-storage/Node.js%20CI?style=flat-square)](https://github.com/maple3142/vuejs-storage/actions?query=workflow%3A%22Node.js+CI%22)\n[![codecov](https://img.shields.io/codecov/c/github/maple3142/vuejs-storage.svg?style=flat-square)](https://codecov.io/gh/maple3142/vuejs-storage)\n\n\n## Purpose\n\nThis plugin provide a simple binding with `localStorage` and `sessionStorage` (or something similar) to **Vue** and **Vuex**.\n\nIt has **[no dependencies](https://www.npmjs.com/package/vuejs-storage?activeTab=dependencies)**, so it is really small.\n\n* `.js` size: 5.75KB (1.7KB gzipped)\n* `.min.js` size: 2.21KB (1.1KB gzipped)\n\n## Usage\n\n```js\n//in webpack environment:\nimport vuejsStorage from 'vuejs-storage'\n//in browser script tag:\nconst vuejsStorage = window.vuejsStorage\n\nVue.use(vuejsStorage)\n\n//vue example\nnew Vue({\n  //...\n  data: {\n    count: 0,\n    text: ''\n  },\n  storage: {\n    keys: ['count'],\n    //keep data.count in localStorage\n    namespace: 'my-namespace'\n  }\n})\n\n//vuex example\nconst store = new Vuex.Store({\n  //state...\n  state: {\n    count: 0\n  },\n  mutations: {\n    increment(state) {\n      state.count++\n    }\n  },\n  plugins: [\n    vuejsStorage({\n      keys: ['count'],\n      //keep state.count in localStorage\n      namespace: 'my-namespace',\n      driver: vuejsStorage.drivers.sessionStorage\n      //if you want to use sessionStorage instead of localStorage\n    })\n  ]\n})\n```\n\n## Nested key\n\n```javascript\ndata: {\n  a: {\n    b: 1,\n    c: 2\n  }\n},\nstorage: {\n  namespace: 'test',\n  keys: ['a.b']\n  //only keep a.b in localStorage\n}\n```\n\n## Vuex modules\n\n```javascript\nstate: {\n  a: 1\n},\nmodules: {\n  moduleA: {\n    state: {\n      a: 2\n    }\n  }\n},\nplugins: [\n  vuejsStorage({\n    namespace: 'test',\n    keys: ['moduleA','a']\n    // keep both root's state.a \u0026 moduleA's state\n  })\n]\n```\n\n## Multiple storage\n\n```javascript\ndata: {\n  a: 1,\n  b: 2\n},\nstorage: [\n  {\n    namespace: 'test',\n    keys: ['a']\n  },\n  {\n    namespace: 'test',\n    keys: ['b'],\n    driver: vuejsStorage.drivers.sessionStorage\n  }\n]\n```\n\n## API\n\n### `vuejsStorage`\n\n**Vue** plugin\n\n```javascript\nVue.use(vuejsStorage)\n```\n\n### `vuejsStorage(option)`\n\nCreate a **Vuex** plugin\n\n```javascript\nconst vuexplugin = vuejsStorage(/* option object*/)\n```\n\n### `option`\n\nOption object, can be used when create **Vuex** plugin or in **Vue** option `storage` field\n\n```javascript\n{\n  keys: [], //array of string\n  /*\n  this option is different when use in vue and vuex\n  when used in Vue constructor option, keys means which data should be keep in localStorage\n  when used in Vuex plugin, keys mean which state should be keep in localStorage\n  */\n  driver: vuejsStorage.drivers.sessionStorage, //any object has 'set','get','has' api, default: vuejsStorage.drivers.localStorage\n  namespace: 'ns', //a string, REQUIRED\n  merge: _assign //a function to merge object like Object.assign, default: internal implementation(src/assign.ts)\n}\n```\n\n## Examples\n\n* [Counter](https://rawgit.com/maple3142/vuejs-storage/master/example.html)\n* [maple3142/TodoList](https://github.com/maple3142/TodoList)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaple3142%2Fvuejs-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaple3142%2Fvuejs-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaple3142%2Fvuejs-storage/lists"}