https://github.com/marcj/angular2-localstorage

Angular 2+ decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.
https://github.com/marcj/angular2-localstorage

Last synced: 3 days ago
JSON representation

Angular 2+ decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.

• Host: GitHub
• URL: https://github.com/marcj/angular2-localstorage
• Owner: marcj
• Created: 2015-12-23T22:40:53.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2020-10-02T08:17:57.000Z (over 4 years ago)
• Last Synced: 2024-12-21T01:00:58.670Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 42 KB
• Stars: 303
• Watchers: 26
• Forks: 107
• Open Issues: 33
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular-components - angular2-localstorage - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically. (Uncategorized / Uncategorized)
• awesome-angular-components - angular2-localstorage - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically. (Uncategorized / Uncategorized)

README

        
# Angular2 @LocalStorage

This little Angular2/typescript decorator makes it super easy to save and restore *automatically* a variable state in your

directive (class property) using HTML5' LocalStorage.

## Seeking new maintainer

This project is not maintained. Please consider taking it over. More information at https://github.com/open-source-chest/take-it-over.

If you are looking for an alternativ right now, look at https://github.com/zoomsphere/ngx-store/.

## Use

1. Download the library using npm or github: `npm install --save angular2-localstorage`

2. Import the WebStorageModule in your app module:

    ```typescript

    import {Component} from "angular2/core";

    import {WebStorageModule, LocalStorageService} from "angular2-localstorage";

    @NgModule({

        import: [WebStorageModule]

    @Component({

        providers: [LocalStorageService]

    })

    export class AppModule {}

    ```

3. Use the `LocalStorage` decorator

```typescript

import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";

class MySuperComponent {

    @LocalStorage() public lastSearchQuery:Object = {};

    @LocalStorage('differentLocalStorageKey') public lastSearchQuery:Object = {};

}

```

**Note**: Define always a default value at the property you are using `@LocalStorage`.

**Note**: The localstorage key is per default the property name. Define the first argument of `@LocalStorage` to set different one.

**Note**: Please don't store circular structures as this library uses JSON.stringify to encode before using LocalStorage.

## Examples

```typescript

@Component({

    selector: 'app-login',

    template: `

    


        

        

    

    

     Keep me logged in


    Login

    `

})

class AppLoginComponent {

    //here happens the magic. `username` is always restored from the localstorage when you reload the site

    @LocalStorage() public username:string = '';

    

    public password:string;

    

    //here happens the magic. `rememberMe` is always restored from the localstorage when you reload the site

    @LocalStorage() public rememberMe:boolean = false;

}

```

```typescript

@Component({

    selector: 'admin-menu',

    template: `



    


        {{i}}: {{category.label}}

    

    


        Some sub menu item 1

        Some sub menu item 2

        Some sub menu item 3

    



    `

})

class AdminMenuComponent {

    public menuItems = [{title: 'Menu1'}, {title: 'Menu2'}, {title: 'Menu3'}];


    //here happens the magic. `hiddenMenuItems` is always restored from the localstorage when you reload the site

    @LocalStorage() public hiddenMenuItems:Array = [];

    

    //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.

    @SessionStorage() public profile:any = {};

}

```