Question

我需要在浏览器的会话中存储数据并检索数据，直到会话退出。如何在Angular 2中使用本地和会话存储？

Answer 1

标准localStorage API应该可用，例如：

localStorage.setItem('whatever', 'something');

它是pretty widely supported。

请注意，如果您还没有"dom"，则需要将"lib"添加到tsconfig.json数组中。

Answer 2

将数据存储在本地存储中

localStorage.setItem('key', 'value');

确保字符串化值，例如，如果您有一个对象
localStorage.setItem(itemName, JSON.stringify(itemData));

对于单个键值对的OR，localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));

并从localstorage中检索数据user = JSON.parse(localStorage.getItem(currentUser));

编辑：你也可以使用一个基于本地localStoreage api的包（我们上面正在使用它）来实现这个目标而你不会不得不担心stringify和解析。查看此包角度5以上。 @ngx-pwa/local-storage

Answer 3

保存到LocalStorage：

localStorage.setItem('key', value);

对于具有属性的对象：

localStorage.setItem('key', JSON.stringify(object));

从本地存储中获取

localStorage.getItem('key');

对象：

JSON.parse(localStorage.getItem('key'));

localStorage对象将数据保存为字符串并检索为字符串。您需要解析所需的输出如果value是对象存储为字符串。例如parseInt(localStorage.getItem('key'));

最好使用框架提供的localStroage而不是第三方库localStorageService或其他任何东西，因为它会减少您的项目规模。

Answer 4

使用Angular2 @LocalStorage模块，其描述为：

这个小的Angular2 / typescript装饰器使它非常容易保存并在指令中自动恢复变量状态（类使用HTML5＆＃39; localStorage的。

如果您需要使用cookies，您应该看看： https://www.npmjs.com/package/angular2-cookie

Answer 5

以下是一个简单服务的示例，它使用localStorage来保存数据：

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

要使用此服务，请在您的应用中的某些模块中提供它，例如在核心模块中。然后像这样使用：

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');
  }
}

Answer 6

本地存储设置项

<强>语法：

  localStorage.setItem(key,value);
  localStorage.getItem(key);

示例：

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... } }

你也可以使用

localStorage.setItem("name", JSON.stringify("Muthu"));

会话存储集项目

<强>语法：

sessionStorage.setItem(key,value); sessionStorage.getItem(key);

示例：

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... } }

你也可以使用

sessionStorage.setItem("name", JSON.stringify("Muthu"));

轻松存储和检索数据

Answer 7

如上所述，应该是：localStorageService.set('key', 'value');和localStorageService.get('key');

Answer 8

您还可以考虑使用由我维护的库： ngx-store （npm i ngx-store）

它使得使用localStorage，sessionStorage和cookie非常容易。有一些支持的方法来操纵数据：

1）装饰者：

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

装饰器存储的变量也可以在不同的类之间共享 - 还有@TempStorage()（别名为@SharedStorage()））为它设计的装饰器。

2）简单的服务方法：

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）构建器模式：

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

另一个重要的事情是你可以监听（每次）存储更改，例如：（下面的代码使用RxJS v5语法）：

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()会返回一个常规的Observable，因此您可以压缩，过滤，弹回它们等。

我总是乐于听取建议和问题，帮助我改进这个图书馆及其文档。

Answer 9

我们可以轻松使用localStorage来设置数据和接收数据。

注意：它适用于angular2和angular 4

-(void) setWebViewMain:(NSString *) link {
    // link = @"http://www.rbc.ru/society/05/09/2017/59ae2dfe9a794753f05e3e06"; if this string uncomment code is working

    NSURL *url = [NSURL URLWithString: link];

    NSLog(@"%@",url); // here url is (null)

    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:requestObj];
    [self.webView reload];

}

Answer 10

您可以使用以下服务在angular项目中的localStorage和sessionStorage上工作。将此服务注入您的组件，服务和...

别忘了在核心模块中注册该服务。

def register(request):
    if request.method == "POST":
        form = RegisterForm(request.POST or None)
        if form.is_valid():
           form.save()
           return redirect('some_view')
    else:
        form = RegisterForm()
    return render(request, 'template', {'form': form})

Answer 11

真正优雅的解决方案是装饰器。您可以使用它们来标记要存储的变量。

export class SomeComponent {

  @LocalStorage
  public variableToBeStored: string;

}

Example how to achieve it is in this article (my blog)

Answer 12

安装＆＃34; angular-2-local-storage＆＃34;

import { LocalStorageService } from 'angular-2-local-storage';

Answer 13

您可以使用cyrilletuzi的 LocalStorage Asynchronous Angular 2+服务。

安装：

$ npm install --save @ngx-pwa/local-storage

用法：

// 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');

更多信息：

https://www.npmjs.com/package/@ngx-pwa/local-storage
https://github.com/cyrilletuzi/angular-async-local-storage

Answer 14

要在本地存储中设置项目或对象，请执行以下操作：

   localStorage.setItem('yourKey', 'yourValue');

要在本地存储中获取项目或对象，必须记住密钥。

   let yourVariable = localStorage.getItem('yourKey');

要将其从本地存储中删除：

   localStorage.removeItem('yourKey');

Answer 15

安装

npm install --save @ngx-pwa/local-storage

首先您需要安装“ angular-2-local-storage”

import { LocalStorageService } from 'angular-2-local-storage';

保存到LocalStorage：

localStorage.setItem('key', value);

从本地存储获取：

localStorage.getItem('key');

Answer 16

设置项目的语法为

localStorage.setItem(key,value);

获取项目的语法为

localStorage.getItem(key);

一个例子是：

localStorage.setItem('email','abc@gmail.com');
    let mail = localStorage.getItem("email");
    if(mail){ 
       console.log('your email id is', mail);
    }
  }

Angular 2中的本地存储

16 个答案: