Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.
TypeScript Makefile JavaScript
Latest commit 85b25ca Feb 2, 2017 @devcken devcken committed with This commit leads to Angular2.0.0 completely. (#63)
* This commit leads to Angular2.0.0 completely.

- Introduce peerDependencies in package.json.
- Arrange several dependencies.
- LocalStorageEmitter#LocalStorageSubscriber signature modified.
  from LocalStorageSubscriber(appPromise: Promise<ComponentRef<any>>) to LocalStorageSubscriber(promise: Promise<NgModuleRef<any>>)
- In WebStrage, chages type of variables implicitly declared with any. This provides type-safe codes.

* Introduce WebStorageModule instead of LocalStroageSubsriber.

- Using WebStorageUtility, it reduces code complexity.
- No more NgZone. It doesn't poll the storage, and set and then just get.

* WebStroageService changed to WebStorageService

* fixed issue with initializing setter

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


  1. Download the library using npm or github: npm install --save angular2-localstorage
  2. Import the WebStorageModule in your app module:

    import {Component} from "angular2/core";
    import {WebStorageModule, LocalStorageService} from "angular2-localstorage";
        import: [WebStorageModule]
        providers: [LocalStorageService]
    export class AppModule {}
  3. Use the LocalStorage decorator

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.


    selector: 'app-login',
    template: `
        <input type="text" [(ngModel)]="username" placeholder="Username" />
        <input type="password" [(ngModel)]="password" placeholder="Password" />

    <input type="checkbox" [(ngModel)]="rememberMe" /> Keep me logged in

    <button type="submit">Login</button>
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;
    selector: 'admin-menu',
    template: `
<div *ngFor="#menuItem of menuItems() | mapToIterable; #i = index">
    <h2 (click)="hiddenMenuItems[i] = !!!hiddenMenuItems[i]">
        {{i}}: {{category.label}}
    <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>
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 = {};