Comment régler & amp; Obtenez angular2-localstorage?

De cette repoj'ai réussi à configurer ceci:

import {Component} from "angular2/core";
import {LocalStorageService} from "angular2-localstorage/LocalStorageEmitter";

@Component({
    provider: [LocalStorageService]
})
export class AppRoot{
    constructor(private storageService: LocalStorageService){}
...
}

Comment puis-je utiliser storageService à définir ou obtenir dans le local de stockage? Je ne trouve pas d'exemple de n'importe où, même dans la doc.

Mis à jour

Après quelques tests, j'ai réussi à le faire fonctionner avec le Décorateur à travers WebStorage:

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

@Component({})
export class LoginComponent implements OnInit {
   @LocalStorage() public username:string = 'hello world';
     ngOnInit() {
         console.log('username', this.username);
         //it prints username hello world
     }
}

Cependant, lorsque j'ai utilisé Chrome Dev pour voir mon localstorage, je ne vois rien là:
Comment régler & amp; Obtenez angular2-localstorage?

Et Dans un autre composant,

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

@Component({})
export class DashboardComponent implements OnInit {
   @LocalStorage() public username:string;
     ngOnInit() {
         console.log(this.username);
         //it prints null
     }
}

source d'informationauteur Vicheanak

6

Le service est importé dans l'application uniquement afin qu'il puisse exécuter l'initialisation du code.

La façon dont vous êtes censé utiliser c'est via les décorateurs comme d'autres réponses mentionnées.

Notez que cela signifie que vous avez seulement besoin d'importer le service dans votre racine de la plupart des (app) composant seulement, pas tous les composants qui utilisent les décorateurs.

Mise à jour

Également essayer d'utiliser le premier moyen dans l'Étape 2 de la instructionsà l'aide de bootstrap au lieu de AppComponent.

Malheureusement, cette bibliothèque est à la recherche d'un nouveau responsable. si vous ne savez pas comment fiable, il est.

je sais qu'il a déjà été répondu, cependant, cette réponse vise à rendre la réponse plus facile à comprendre.

D'abord vous avez besoin de faire cela dans votre fichier principal:

import {LocalStorageService, LocalStorageSubscriber} from 'angular2-localstorage/LocalStorageEmitter';
var appPromise = bootstrap(MyRootAppComponent, [ LocalStorageService ]);

//register LocalStorage, this registers our change-detection.
LocalStorageSubscriber(appPromise);

Puis à ENSEMBLE une valeur, dans votre composant, vous importez WebStorage:

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

@Component({})
export class LoginComponent implements OnInit {
   @LocalStorage('username') public username:string; 
   //username as the parameter will help to use get function
     ngOnInit() {
         this.username = 'hello world';
         console.log('username', this.username);
         //it prints username hello world
     }
}

À OBTENIR une valeur de retour à partir du local de stockage dans un autre volet, faites ceci:

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

@Component({})
export class DashboardComponent implements OnInit {
   @LocalStorage('username') public username:string;
   //need to pass your own key parameter to get the value
     ngOnInit() {
         console.log(this.username);
         //it prints 'hello world'
     }
}

Vérifier votre chrome dev, vous localstorage est enregistré:
Comment régler & amp; Obtenez angular2-localstorage?

De prendre un coup d'oeil à la GitHub-Page: https://github.com/marcj/angular2-localstorage

nous dit de l'utiliser comme ça:

Exemple1

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

@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;
}

Exemple 2

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

@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 = {};
}

Mise à JOUR

Si vous souhaitez l'utiliser dans tous vos composants, vous devez créer un service partagé:

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

@Injectable()
export class MyStorageService {
   @LocalStorage() public username:string = '';
   constructor() {}
}

Et de l'utiliser comme ceci (ne pas copier&pâte prête!)

export class Component1 {

   private username: string;

   constructor(private _storage: MyStorageService) {
      this.username = this._storage.username;
   }
}

export class Component2 {

   private username: string;

   constructor(private _storage: MyStorageService) {
      this.username = this._storage.username;
   }
}

À partir de la documentation:

Utiliser le LocalStorage décorateur

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

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

vous êtes ici: github

1

Vous pouvez très simplement faire comme ci-dessous

//situé dans l'un de vos fichier ts
```
localStorage.setItem('variablekey',value);
```
//obtenir de n'importe quel autre fichier ts
```
localStorage.getItem("variablekey");
```
//si vous voulez effacer la valeur et puis
```
localStorage.removeItem("variablekey");
```

Je préfère créer un Injectable service

import { Injectable } from '@angular/core';
@Injectable()
export class LocalStorageService {

    constructor() {
        //
    }

    public setData(key:string, data:any) {
        localStorage.setItem(key, JSON.stringify(data));
    }
    public getData(key:string) {
        return JSON.parse(localStorage.getItem(key));
    }

    public removeData(key:string) {
        localStorage.removeItem(key);
    }
}

Et dans votre composant

import { LocalStorageService } from './../../services/localStorageService';
@Component({
    selector: 'member-claims-modal',
    templateUrl: './view.html'
})

export class UserComponent {
constructor(private localStorageService:LocalStorageService) {
        super();
    }
    public SampleMethod() {
    let cloneData = {
            'claims': 'hello'
        };
    this.localStorageService.setData('claims', cloneData);
    let item=this.localStorageService.getData('claims');
    consoloe.log(item);
    this.localStorageService.removeData('claims');
    }
}

Vous devez vous connecter pour publier un commentaire.