{"id":27916732,"url":"https://github.com/stanvanheumen/ngx-storage","last_synced_at":"2025-05-06T16:39:20.655Z","repository":{"id":57159904,"uuid":"123486113","full_name":"stanvanheumen/ngx-storage","owner":"stanvanheumen","description":"A simple library that allows you use local storage in Angular 5+.","archived":false,"fork":false,"pushed_at":"2018-03-10T11:07:08.000Z","size":153,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T08:23:44.827Z","etag":null,"topics":["angular","angular-library","angular-universal","aot-compilation","localstorage","observables","typescript"],"latest_commit_sha":null,"homepage":null,"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/stanvanheumen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-01T20:03:28.000Z","updated_at":"2022-02-13T19:39:57.000Z","dependencies_parsed_at":"2022-09-09T00:11:08.169Z","dependency_job_id":null,"html_url":"https://github.com/stanvanheumen/ngx-storage","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanvanheumen%2Fngx-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanvanheumen%2Fngx-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanvanheumen%2Fngx-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanvanheumen%2Fngx-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stanvanheumen","download_url":"https://codeload.github.com/stanvanheumen/ngx-storage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252721925,"owners_count":21793927,"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":["angular","angular-library","angular-universal","aot-compilation","localstorage","observables","typescript"],"created_at":"2025-05-06T16:39:19.133Z","updated_at":"2025-05-06T16:39:20.642Z","avatar_url":"https://github.com/stanvanheumen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `ngx-storage`\nA simple library that allows you to use local storage in Angular 5+.\n\n- Use \u003ckbd\u003ecommand\u003c/kbd\u003e + \u003ckbd\u003eF\u003c/kbd\u003e or \u003ckbd\u003ectrl\u003c/kbd\u003e + \u003ckbd\u003eF\u003c/kbd\u003e to search for a keyword.\n- Contributions welcome, please see [contribution guide](.github/CONTRIBUTING.md).\n\n## Features\n\n- :frog: **Observable based**\n- :camel: **Easy implementation**\n- :mouse: **Lazy loading compatible**\n- :sheep: **Angular Universal compatible**\n- :panda_face: **Automatic JSON (de)serialization**\n- :bird: **Ahead-Of-Time compilation compatible**\n- :hamster: **Library can be consumed by Angular CLI, Webpack, or SystemJS**\n\n## Demo\n\n[Click here to play with the example](https://stackblitz.com/github/stanvanheumen/ngx-storage)\n\n## Installation\n\nTo use ngx-storage in your project install it via `npm` or `yarn`:\n\n```bash\n$ npm install @stanvanheumen/ngx-storage --save\n\n# or\n\n$ yarn add @stanvanheumen/ngx-storage\n```\n\n## Setup\n\nAdd the `NgxStorageModule` to your imports array in your `CoreModule`.\n\n```typescript\nimport {NgxStorageModule} from '@stanvanheumen/ngx-storage';\n\n@NgModule({\n    imports: [NgxStorageModule]\n})\nexport class AppModule {}\n```\n\n\u003e Since the `StorageService` contains state it is important to only import the `NgxStorageModule` in your `CoreModule`.\n\n## API\n\nThe `StorageService` has the following API:\n\n#### `.get\u003cT\u003e(token: string): Observable\u003cT | null\u003e`\n\nReturns the value associated to the specified token wrapped in an observable stream that will get updated each time the \nuser sets a new value in the storage.\n\n```typescript\n// For a primitive type like string, number and boolean.\nconst string$ = this.storage.get\u003cstring\u003e('my-string');\n\n// For an advanced object or array.\nconst object$ = this.storage.get\u003cMyAdvancedObject\u003e('my-advanced-object');\n```\n\n\u003e The value is deserialized using the `JSON.parse()` method.\n\n#### `.set\u003cT\u003e(token: string, data: T): void`\n\nAssociates a value to the specified token. \n\n```typescript\n// For a primitive type like string, number and boolean.\nthis.storage.set\u003cstring\u003e('my-local-storage-token', 'my-new-value');\n\n// For an advanced object or array.\nthis.storage.set\u003cMyAdvancedObject\u003e('my-advanced-object', {name: 'Test', description: 'Lorem Ipsum'});\n```\n\n\u003e The value is serialized using the `JSON.stringify()` method.\n\n#### `.remove(token: string): void`\n\nRemoves the value associated to the specified token.\n\n```typescript\nthis.storage.remove('my-local-storage-token');\n```\n\n#### `.clear(): void`\n\nRemoves all key-value pairs from the storage.\n\n```typescript\nthis.storage.clear();\n```\n\n## Example\n\n```typescript\nimport {Component, OnInit} from '@angular/core';\nimport {StorageService} from '@stanvanheumen/ngx-storage';\nimport {Observable} from 'rxjs/Observable';\n\n@Component({\n    selector: 'app-root',\n    template: `\n        \u003cpre\u003e\u003ccode\u003eCurrent value in the local storage : {{ data$ | async | json }}\u003c/code\u003e\u003c/pre\u003e\n        \n        \u003cbutton (click)=\"setStorageValue('Awesome')\"\u003eSet value to \u003cstrong\u003e\"Awesome\"\u003c/strong\u003e\u003c/button\u003e\n        \u003cbutton (click)=\"setStorageValue('Cool')\"\u003eSet value to \u003cstrong\u003e\"Cool\"\u003c/strong\u003e\u003c/button\u003e\n        \u003cbutton (click)=\"setStorageValue('Hello world!')\"\u003eSet value to \u003cstrong\u003e\"Hello world!\"\u003c/strong\u003e\u003c/button\u003e\n        \u003cbutton (click)=\"removeStorageValue()\"\u003eClear the value\u003c/button\u003e\n    `\n})\nexport class AppComponent implements OnInit {\n    \n    data$: Observable\u003cstring\u003e;\n    \n    constructor(private storage: StorageService) {\n    }\n    \n    ngOnInit() {\n        this.data$ = this.storage.get\u003cstring\u003e('my-local-storage-token');\n    }\n    \n    setStorageValue(value: string) {\n        this.storage.set\u003cstring\u003e('my-local-storage-token', value);\n    }\n    \n    removeStorageValue() {\n        this.storage.remove('my-local-storage-token');\n    }\n\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanvanheumen%2Fngx-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstanvanheumen%2Fngx-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanvanheumen%2Fngx-storage/lists"}