HTML5 本地存储 Angular 2

Posted 2023-03-05

【中文标题】HTML5 本地存储 Angular 2

【英文标题】：HTML5 local storage Angular 2

【发布时间】：2018-01-22 05:14:40

【问题描述】：

我现在第一次尝试在 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
  ) 

我绑定它，形式上的一切都很好。 现在想存到本地存储（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 = ;
   */
       


 

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

【问题讨论】：

你听说过localStorage.setItem()和localStorage.getItem()吗？如果没有，我建议先用谷歌搜索一下

实例之间是否需要保存用户数据？如果没有，那么我将创建一个可注入类

【参考方案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');

---

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

LOCAL STORAGE UTILITY CLASS

【参考方案2】：

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

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

【参考方案3】：

您应该使用localStorage.setItem() 来保存您的数据，并使用localStorage.getItem() 从localStorage 中获取您保存的数据。请阅读此localStorage Documentation 了解更多详情。

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

将数据保存到本地存储：

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

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

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

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

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

localStorage.removeItem('userKey');

或

localStorage.clear();

您可以将您的数据从每个点请求到应用程序中的 localStorage。

【参考方案4】：

使用 html5 本地存储 像这样

localStorage.setItem("key",value) 设置一个项目，然后即使关闭浏览器也可以获取它。

localStorage.getItem("key");

并保存为字符串