HTML5本地存储 Angular 2

Question

我现在尝试在Angular2中第一次实现本地存储，但有些困惑。

所以，我有一个First组件，用于注册用户。

export class FormComponent {
  modus = ['first', 'second'];
  model: User = new User('', '', '');
  constructor(private _cookieService: CookieService) {}
}

这是一个类，在FormComponent中使用。

export class User {
  constructor (
    public email: string,
    public name: string,
    public modus: string
  ) {}
}

我将其绑定后，表单中的所有内容都能够很好地工作。 现在，我想将其存储在本地存储中（User 的 3 个参数）。

但是，我该如何做呢？

我离开包含用户注册的页面并转到其他页面，比如：

export class Part1Component {
  public email;
  public name;
  public modus;

  constructor(private _location: Location) {}
     myTestFunction(){

    /* assign values here
       this.email = ;
       this.name = ;
       this.modus = ;
   */
       }


 }

如何从存储中获取值并将它们赋给这里？

- Anna F

---

你听说过 localStorage.setItem() 和 localStorage.getItem() 吗？如果没有，我建议先去谷歌一下。 - Jeremy Thille

用户数据是否需要在实例之间保存？如果不需要，那么我会创建一个可注入的类。 - mast3rd3mon

Answer 1

Typescript提供了localStorage，您可以使用它来设置和获取存储数据。

在需要设置数据的地方使用localStorage.setItem(key, value);方法。

localStorage.setItem('__user__email', user.email);
localStorage.setItem('__user__name', user.name);
localStorage.setItem('__user__modus', user.modus);

..并且localStorage.getItem(key);用于获取数据。

myTestFunction() {

    // assign values here
    this.email = localStorage.getItem('__user__email');
    this.name  = localStorage.getItem('__user__name');
    this.modus = localStorage.getItem('__user__modus');
}

---

您可以查看我在其中一个项目中创建的实用程序类并使用它：

本地存储实用程序类

- FAISAL

Answer 2

如果你使用JSON.stringify()将用户对象存储在会话存储中，则可以这样做。

let user = JSON.parse(localStorage.getItem('user'));
this.email=user.email;
this.name=user.name;

- Prathmesh Dali

Answer 3

你应该使用localStorage.setItem()来保存数据，使用localStorage.getItem()从localStorage获取已保存的数据。请阅读localStorage文档以获取更多详细信息。

这里有一个使用localStorage的简单示例。

将数据保存到localStorage：

localStorage.setItem('userKey', JSON.stringify(this.model));

请注意，您只能将字符串保存到localStorage中。

从localStorage获取您的示例中保存的数据：

let savedUser: User = JSON.parse(localStorage.getItem('userKey'));

如果您想清除或删除已保存的数据，您可以使用以下代码：

localStorage.removeItem('userKey');

或者

localStorage.clear();

您可以在应用程序中的任何点向localStorage请求数据。

- Gregor Doroschenko

Answer 4

使用HTML5的localStorage，可以像这样操作： localStorage.setItem("key", value)

设置一个项目，即使关闭浏览器，您也可以获取它。

localStorage.getItem("key");

并且将其保存为字符串

- herozhou