Question

我第一次尝试在Angular2中实现一个本地存储，并且有点困惑。

所以，我有第一个组件，我注册我的用户

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

我绑定它，形式上的一切都很好。现在我想将它存储在本地存储中（3个参数User）

但我怎么能这样做？

我离开此页面注册用户并转到其他页面，例如

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

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

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


 }

我如何从存储中获取值并在此处分配它们？

Answer 1

如果您使用Json.stringify()将用户对象存储在会话存储中，那么您可以这样做

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

Answer 2

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

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

LOCAL STORAGE UTILITY CLASS

Answer 3

您应该使用localStorage.setItem()保存数据，并使用localStorage.getItem()从localStorage获取已保存的数据。有关详细信息，请阅读此localStorage Documentation。

以下是使用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请求您的数据。

Answer 4

使用html5 localStorage 像这样

localStorage.setItem（＆＃34;键＆＃34;，值）设置一个项目然后即使你关闭了borwser你也可以得到它。

localStorage.getItem（＆＃34;键＆＃34）;

并保存为字符串

HTML5本地存储Angular 2

4 个答案: