web-dev-qa-db-fra.com

Comment configurer et obtenir dans angular2-localstorage?

A partir de cela repo , j'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 pour définir ou accéder au stockage local? Je ne trouve d'exemple nulle part, même dans le document.

Mis à jour

Après quelques tests, je l'ai réussi à le faire fonctionner avec Decorator via 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 stockage local, je n'y vois rien: enter image description here

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
     }
}
angulartypescriptlocal-storageangular-local-storage
10
Vicheanak

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

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

Notez que cela signifie que vous devez uniquement importer le service dans votre composant racine (application) uniquement, pas tous les composants qui utilisent les décorateurs.

Mise à jour

Essayez également d'utiliser la première méthode à l'étape 2 du instructions , en utilisant bootstrap au lieu de AppComponent.

Malheureusement, cette bibliothèque recherche un nouveau responsable. donc pas sûr de sa fiabilité.

6
Meligy

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

Vous devez d'abord le faire 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 pour [~ # ~] définir [~ # ~] 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
     }
}

Pour [~ # ~] récupérer [~ # ~] une valeur du stockage local dans un autre composant, procédez comme suit:

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érifiez votre chrome dev, votre stockage local est enregistré: enter image description here

4
Vicheanak

Jetez un oeil à la page GitHub: https://github.com/marcj/angular2-localstorage

nous dit de l'utiliser comme ça:

Exemple 1

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 utilisez-le comme ça (pas copier-coller prêt!)

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;
   }
}
3
mxii

Je préférerais créer un service injectable distinct

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');
    }
}
1
Praveen M P

De la documentation:

Utilisez le décorateur LocalStorage

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

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

vous voici: github

1
Daredzik

Vous pouvez simplement faire comme ci-dessous

// définir dans l'un de vos fichiers ts

localStorage.setItem('variablekey',value);

// récupère de tout autre fichier ts

localStorage.getItem("variablekey");

// si vous voulez une valeur claire alors

localStorage.removeItem("variablekey");
1
ULLAS K