import {Component} from "angular2/core";
import {WebStorageModule, LocalStorageService} from "angular2-localstorage";@NgModule({import: [WebStorageModule]
@Component({providers: [LocalStorageService]
})
export class AppModule {}

import {LocalStorage, SessionStorage} from "angular2-localstorage/WebStorage";class MySuperComponent {@LocalStorage() public lastSearchQuery:Object = {};@LocalStorage('differentLocalStorageKey') public lastSearchQuery:Object = {};
}

@Component({selector: 'app-login',template: `
<form><div><input type="text" [(ngModel)]="username" placeholder="Username" /><input type="password" [(ngModel)]="password" placeholder="Password" /></div><input type="checkbox" [(ngModel)]="rememberMe" /> Keep me logged in<button type="submit">Login</button>
</form>`
})
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;
}
@Component({selector: 'admin-menu',template: `
<div *ngFor="#menuItem of menuItems() | mapToIterable; #i = index"><h2 (click)="hiddenMenuItems[i] = !!!hiddenMenuItems[i]">{{i}}: {{category.label}}</h2><div style="padding-left: 15px;" [hidden]="hiddenMenuItems[i]"><a href>Some sub menu item 1</a><a href>Some sub menu item 2</a><a href>Some sub menu item 3</a></div>
</div>`
})
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<boolean> = [];//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 = {};
}