问题
I need to store data in the browser\'s session and retrieve the data until the session exits. How do you use local and session storage in Angular 2?
回答1:
The standard localStorage API should be available, just do e.g.:
localStorage.setItem('whatever', 'something');
It's pretty widely supported.
Note that you will need to add "dom" to the "lib" array in your tsconfig.json if you don't already have it.
回答2:
To store data in local-storage,
localStorage.setItem('key', 'value');
Make sure to stringify value, for example if you have an object localStorage.setItem(itemName, JSON.stringify(itemData));
OR for individual key-value pairs localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));
And to retrieve data from localstorage user = JSON.parse(localStorage.getItem('currentUser'));
edit: You could also use a package that is based on native localStoreage api (that we are using above) to achieve this and you don't have to worry about stringify and parse. Checkout this package for angular 5 and above. @ngx-pwa/local-storage
回答3:
Save into LocalStorage:
localStorage.setItem('key', value);
For objects with properties:
localStorage.setItem('key', JSON.stringify(object));
Get From Local Storage:
localStorage.getItem('key');
For objects:
JSON.parse(localStorage.getItem('key'));
localStorage Object will save data as string and retrieve as string. You need to Parse desired output
if value is object stored as string.
e.g. parseInt(localStorage.getItem('key'));
It is better to use framework provided localStroage instead of 3rd party library localStorageService or anything else because it reduces your project size.
回答4:
Use Angular2 @LocalStorage module, which is described as:
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.
If you need to use cookies, you should take a look at: https://www.npmjs.com/package/angular2-cookie
回答5:
Here is an example of a simple service, that uses localStorage to persist data:
import { Injectable } from '@angular/core';
@Injectable()
export class PersistanceService {
constructor() {}
set(key: string, data: any): void {
try {
localStorage.setItem(key, JSON.stringify(data));
} catch (e) {
console.error('Error saving to localStorage', e);
}
}
get(key: string) {
try {
return JSON.parse(localStorage.getItem(key));
} catch (e) {
console.error('Error getting data from localStorage', e);
return null;
}
}
}
To use this services, provide it in some module in your app like normal, for example in core module. Then use like this:
import { Injectable } from '@angular/core';
@Injectable()
export class SomeOtherService {
constructor(private persister: PersistanceService) {}
someMethod() {
const myData = {foo: 'bar'};
persister.set('SOME_KEY', myData);
}
someOtherMethod() {
const myData = persister.get('SOME_KEY');
}
}
回答6:
Local Storage Set Item
Syntax:
localStorage.setItem(key,value);
localStorage.getItem(key);
Example:
localStorage.setItem("name","Muthu");
if(localStorage){ //it checks browser support local storage or not
let Name=localStorage.getItem("name");
if(Name!=null){ // it checks values here or not to the variable
//do some stuff here...
}
}
also you can use
localStorage.setItem("name", JSON.stringify("Muthu"));
Session Storage Set Item
Syntax:
sessionStorage.setItem(key,value);
sessionStorage.getItem(key);
Example:
sessionStorage.setItem("name","Muthu");
if(sessionStorage){ //it checks browser support session storage/not
let Name=sessionStorage.getItem("name");
if(Name!=null){ // it checks values here or not to the variable
//do some stuff here...
}
}
also you can use
sessionStorage.setItem("name", JSON.stringify("Muthu"));
Store and Retrieve data easily
回答7:
You can also consider using library maintained by me: ngx-store (npm i ngx-store)
It makes working with localStorage, sessionStorage and cookies incredibly easy. There are a few supported methods to manipulate the data:
1) Decorator:
export class SomeComponent {
@LocalStorage() items: Array<string> = [];
addItem(item: string) {
this.items.push(item);
console.log('current items:', this.items);
// and that's all: parsing and saving is made by the lib in the background
}
}
Variables stored by decorators can be also shared across different classes - there is also @TempStorage() (with an alias of @SharedStorage())) decorator designed for it.
2) Simple service methods:
export class SomeComponent {
constructor(localStorageService: LocalStorageService) {}
public saveSettings(settings: SettingsInterface) {
this.localStorageService.set('settings', settings);
}
public clearStorage() {
this.localStorageService.utility
.forEach((value, key) => console.log('clearing ', key));
this.localStorageService.clear();
}
}
3) Builder pattern:
interface ModuleSettings {
viewType?: string;
notificationsCount: number;
displayName: string;
}
class ModuleService {
constructor(public localStorageService: LocalStorageService) {}
public get settings(): NgxResource<ModuleSettings> {
return this.localStorageService
.load(`userSettings`)
.setPath(`modules`)
.setDefaultValue({}) // we have to set {} as default value, because numeric `moduleId` would create an array
.appendPath(this.moduleId)
.setDefaultValue({});
}
public saveModuleSettings(settings: ModuleSettings) {
this.settings.save(settings);
}
public updateModuleSettings(settings: Partial<ModuleSettings>) {
this.settings.update(settings);
}
}
Another important thing is you can listen for (every) storage changes, e.g. (the code below uses RxJS v5 syntax):
this.localStorageService.observe()
.filter(event => !event.isInternal)
.subscribe((event) => {
// events here are equal like would be in:
// window.addEventListener('storage', (event) => {});
// excluding sessionStorage events
// and event.type will be set to 'localStorage' (instead of 'storage')
});
WebStorageService.observe() returns a regular Observable, so you can zip, filter, bounce them etc.
I'm always open to hearing suggestions and questions helping me to improve this library and its documentation.
回答8:
As said above, should be: localStorageService.set('key', 'value'); and localStorageService.get('key');
回答9:
We can easily use the localStorage for setting the data and receiving the data.
Note: it works with both angular2 and angular 4
//set the data
localStorage.setItem(key, value); //syntax example
localStorage.setItem('tokenKey', response.json().token);
//get the data
localStorage.getItem('tokenKey')
//confirm if token is exist or not
return localStorage.getItem('tokenKey') != null;
回答10:
The syntax of set item is
localStorage.setItem(key,value);
The syntax of get item is
localStorage.getItem(key);
An example of this is:
localStorage.setItem('email','abc@gmail.com');
let mail = localStorage.getItem("email");
if(mail){
console.log('your email id is', mail);
}
}
回答11:
Really elegant solution are decorators. You can use them to mark variables you want to store.
export class SomeComponent {
@LocalStorage
public variableToBeStored: string;
}
Example how to achieve it is in this article (my blog)
回答12:
You can use the following service to work on localStorage and sessionStorage in your angular project. inject this service in your components, services and ...
Do not forget to register the service in your core module.
import { Injectable } from '@angular/core';
@Injectable()
export class BrowserStorageService {
getSession(key: string): any {
const data = window.sessionStorage.getItem(key);
if (data) {
return JSON.parse(data);
} else {
return null;
}
}
setSession(key: string, value: any): void {
const data = value === undefined ? '' : JSON.stringify(value);
window.sessionStorage.setItem(key, data);
}
removeSession(key: string): void {
window.sessionStorage.removeItem(key);
}
removeAllSessions(): void {
for (const key in window.sessionStorage) {
if (window.sessionStorage.hasOwnProperty(key)) {
this.removeSession(key);
}
}
}
getLocal(key: string): any {
const data = window.localStorage.getItem(key);
if (data) {
return JSON.parse(data);
} else {
return null;
}
}
setLocal(key: string, value: any): void {
const data = value === undefined ? '' : JSON.stringify(value);
window.localStorage.setItem(key, data);
}
removeLocal(key: string): void {
window.localStorage.removeItem(key);
}
removeAllLocals(): void {
for (const key in window.localStorage) {
if (window.localStorage.hasOwnProperty(key)) {
this.removeLocal(key);
}
}
}
}
回答13:
Install "angular-2-local-storage"
import { LocalStorageService } from 'angular-2-local-storage';
回答14:
You can use cyrilletuzi's LocalStorage Asynchronous Angular 2+ Service.
Install:
$ npm install --save @ngx-pwa/local-storage
Usage:
// your.service.ts
import { LocalStorage } from '@ngx-pwa/local-storage';
@Injectable()
export class YourService {
constructor(private localStorage: LocalStorage) { }
}
// Syntax
this.localStorage
.setItem('user', { firstName:'Henri', lastName:'Bergson' })
.subscribe( () => {} );
this.localStorage
.getItem<User>('user')
.subscribe( (user) => { alert(user.firstName); /*should be 'Henri'*/ } );
this.localStorage
.removeItem('user')
.subscribe( () => {} );
// Simplified syntax
this.localStorage.setItemSubscribe('user', { firstName:'Henri', lastName:'Bergson' });
this.localStorage.removeItemSubscribe('user');
More info here:
https://www.npmjs.com/package/@ngx-pwa/local-storage
https://github.com/cyrilletuzi/angular-async-local-storage
回答15:
To set the item or object in local storage:
localStorage.setItem('yourKey', 'yourValue');
To get the item or object in local storage, you must remember your key.
let yourVariable = localStorage.getItem('yourKey');
To remove it from local storage:
localStorage.removeItem('yourKey');
回答16:
install
npm install --save @ngx-pwa/local-storage
first of all you need to Install "angular-2-local-storage"
import { LocalStorageService } from 'angular-2-local-storage';
Save into LocalStorage:
localStorage.setItem('key', value);
Get From Local Storage:
localStorage.getItem('key');
来源：https://stackoverflow.com/questions/40589730/local-storage-in-angular-2