{"id":13481473,"url":"https://github.com/marcj/angular2-localstorage","last_synced_at":"2025-04-04T19:14:15.223Z","repository":{"id":57179635,"uuid":"48514030","full_name":"marcj/angular2-localstorage","owner":"marcj","description":"Angular 2+ decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.","archived":false,"fork":false,"pushed_at":"2020-10-02T08:17:57.000Z","size":43,"stargazers_count":303,"open_issues_count":33,"forks_count":107,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-12-21T01:00:58.670Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-23T22:40:53.000Z","updated_at":"2024-11-07T04:45:14.000Z","dependencies_parsed_at":"2022-09-10T18:22:07.256Z","dependency_job_id":null,"html_url":"https://github.com/marcj/angular2-localstorage","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fangular2-localstorage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fangular2-localstorage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fangular2-localstorage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fangular2-localstorage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcj","download_url":"https://codeload.github.com/marcj/angular2-localstorage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234923,"owners_count":20905854,"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-07-31T17:00:52.146Z","updated_at":"2025-04-04T19:14:15.201Z","avatar_url":"https://github.com/marcj.png","language":"TypeScript","readme":"# Angular2 @LocalStorage\n\nThis little Angular2/typescript decorator makes it super easy to save and restore *automatically* a variable state in your\ndirective (class property) using HTML5' LocalStorage.\n\n## Seeking new maintainer\n\nThis project is not maintained. Please consider taking it over. More information at https://github.com/open-source-chest/take-it-over.\nIf you are looking for an alternativ right now, look at https://github.com/zoomsphere/ngx-store/.\n\n## Use\n\n1. Download the library using npm or github: `npm install --save angular2-localstorage`\n2. Import the WebStorageModule in your app module:\n    ```typescript\n    import {Component} from \"angular2/core\";\n    import {WebStorageModule, LocalStorageService} from \"angular2-localstorage\";\n\n    @NgModule({\n        import: [WebStorageModule]\n    @Component({\n        providers: [LocalStorageService]\n    })\n    export class AppModule {}\n    ```\n\n\n3. Use the `LocalStorage` decorator\n```typescript\nimport {LocalStorage, SessionStorage} from \"angular2-localstorage/WebStorage\";\n\nclass MySuperComponent {\n    @LocalStorage() public lastSearchQuery:Object = {};\n    @LocalStorage('differentLocalStorageKey') public lastSearchQuery:Object = {};\n}\n```\n\n**Note**: Define always a default value at the property you are using `@LocalStorage`.\n\n**Note**: The localstorage key is per default the property name. Define the first argument of `@LocalStorage` to set different one.\n\n**Note**: Please don't store circular structures as this library uses JSON.stringify to encode before using LocalStorage.\n\n## Examples\n\n```typescript\n@Component({\n    selector: 'app-login',\n    template: `\n\u003cform\u003e\n    \u003cdiv\u003e\n        \u003cinput type=\"text\" [(ngModel)]=\"username\" placeholder=\"Username\" /\u003e\n        \u003cinput type=\"password\" [(ngModel)]=\"password\" placeholder=\"Password\" /\u003e\n    \u003c/div\u003e\n    \n    \u003cinput type=\"checkbox\" [(ngModel)]=\"rememberMe\" /\u003e Keep me logged in\n\n    \u003cbutton type=\"submit\"\u003eLogin\u003c/button\u003e\n\u003c/form\u003e\n    `\n})\nclass AppLoginComponent {\n    //here happens the magic. `username` is always restored from the localstorage when you reload the site\n    @LocalStorage() public username:string = '';\n    \n    public password:string;\n    \n    //here happens the magic. `rememberMe` is always restored from the localstorage when you reload the site\n    @LocalStorage() public rememberMe:boolean = false;\n}\n```\n\n\n```typescript\n@Component({\n    selector: 'admin-menu',\n    template: `\n\u003cdiv *ngFor=\"#menuItem of menuItems() | mapToIterable; #i = index\"\u003e\n    \u003ch2 (click)=\"hiddenMenuItems[i] = !!!hiddenMenuItems[i]\"\u003e\n        {{i}}: {{category.label}}\n    \u003c/h2\u003e\n    \u003cdiv style=\"padding-left: 15px;\" [hidden]=\"hiddenMenuItems[i]\"\u003e\n        \u003ca href\u003eSome sub menu item 1\u003c/a\u003e\n        \u003ca href\u003eSome sub menu item 2\u003c/a\u003e\n        \u003ca href\u003eSome sub menu item 3\u003c/a\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n    `\n})\nclass AdminMenuComponent {\n    public menuItems = [{title: 'Menu1'}, {title: 'Menu2'}, {title: 'Menu3'}];\n\n    //here happens the magic. `hiddenMenuItems` is always restored from the localstorage when you reload the site\n    @LocalStorage() public hiddenMenuItems:Array\u003cboolean\u003e = [];\n    \n    //here happens the magic. `profile` is always restored from the sessionStorage when you reload the site from the current tab/browser. This is perfect for more sensitive information that shouldn't stay once the user closes the browser.\n    @SessionStorage() public profile:any = {};\n}\n```\n","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcj%2Fangular2-localstorage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcj%2Fangular2-localstorage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcj%2Fangular2-localstorage/lists"}