Angular 6：将数据保存到本地存储

服务器

Angular 6：将数据保存到本地存储

在Angular 6中，我们可以很方便地将数据保存到本地存储中。本地存储是一种在浏览器中存储数据的机制，它可以帮助我们在应用程序中保存和检索数据，而无需依赖后端服务器。本文将介绍如何在Angular 6中使用本地存储来保存数据，并提供一个简单的案例代码。

首先，我们需要在Angular应用程序中安装一个名为"ngx-webstorage-service"的库。这个库提供了一个可用于在Angular应用程序中访问本地存储的服务。

安装该库的命令如下：

npm install ngx-webstorage-service --save

安装完成后，我们需要在Angular应用程序的模块中导入该库：

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LocalStorageService } from 'ngx-webstorage-service';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [LocalStorageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，我们已经成功导入了LocalStorageService服务。接下来，我们需要在组件中使用这个服务来保存数据。

假设我们有一个名为"UserComponent"的组件，它包含一个表单，用于输入用户的姓名和电子邮件地址。我们可以使用LocalStorageService来保存用户输入的数据。

首先，我们需要在组件中导入LocalStorageService：

typescript
import { Component } from '@angular/core';
import { LocalStorageService } from 'ngx-webstorage-service';
@Component({
  selector: 'app-user',
  template: <code>
    <form (ngSubmit)="saveUserData()">
      <label for="name">Name:</label>
      <input type="text" id="name" [(ngModel)]="name" name="name" required>
      <label for="emAIl">EmAIl:</label>
      <input type="emAIl" id="emAIl" [(ngModel)]="emAIl" name="emAIl" required>
      <button type="submit">Save</button>
    </form>
  </code>
})
export class UserComponent {
  name: string;
  emAIl: string;
  constructor(private localStorage: LocalStorageService) { }
  saveUserData() {
    const userData = {
      name: this.name,
      emAIl: this.emAIl
    };
    this.localStorage.set('userData', JSON.stringify(userData));
  }
}

在上面的代码中，我们首先导入LocalStorageService，并在构造函数中注入它。然后，我们创建了一个saveUserData方法，该方法将用户输入的姓名和电子邮件地址保存在一个名为"userData"的本地存储项中。

现在，我们已经成功将用户数据保存在本地存储中了。接下来，我们可以在需要的地方检索这些数据。

假设我们有一个名为"ProfileComponent"的组件，它需要显示用户的姓名和电子邮件地址。我们可以使用LocalStorageService来检索这些数据。

首先，我们需要在组件中导入LocalStorageService：

typescript
import { Component } from '@angular/core';
import { LocalStorageService } from 'ngx-webstorage-service';
@Component({
  selector: 'app-profile',
  template: <code>
    <h2><strong>User Profile</strong></h2>
    
<strong>Name:</strong> {{ name }}
    
<img src="https://img.izhida.com/topic/1e35bcba2dba1089c7bd0805d4517c8f.jpg" alt="typescript"><br>typescript
<strong>EmAIl:</strong> {{ emAIl }}
  </code>
})
export class ProfileComponent {
  name: string;
  emAIl: string;
  constructor(private localStorage: LocalStorageService) { }
  ngOnInit() {
    const userData = this.localStorage.get('userData');
    if (userData) {
      const parsedData = JSON.parse(userData);
      this.name = parsedData.name;
      this.emAIl = parsedData.emAIl;
    }
  }
}

在上面的代码中，我们首先导入LocalStorageService，并在构造函数中注入它。然后，在ngOnInit方法中，我们使用localStorage.get方法来检索之前保存的用户数据，并将它们分配给组件的属性。

最后，我们可以在需要显示用户数据的地方使用ProfileComponent。

typescript
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: <code>
    <app-user></app-user>
    <app-profile></app-profile>
  </code>
})
export class AppComponent { }

在上面的代码中，我们将UserComponent和ProfileComponent添加到了AppComponent中，这样就可以在应用程序中使用它们了。

：

在本文中，我们学习了如何在Angular 6中使用本地存储来保存和检索数据。通过使用"ngx-webstorage-service"库，我们可以方便地在Angular应用程序中访问本地存储。我们提供了一个简单的案例代码，演示了如何保存用户数据并在另一个组件中检索并显示这些数据。希望这篇文章对你有所帮助！