将电子邮件保存在本地存储 angular-cli答案

【问题标题】：save email in local storage angular-cli将电子邮件保存在本地存储 angular-cli
【发布时间】：2018-04-17 02:31:48
【问题描述】：

所以我使用 Angular CLI。我想将电子邮件保存在本地存储中。我的html代码：

<input type="text" name="email_field" id="email"> 
<input type="submit" value="registration" onclick="save_email()">

我的打字脚本代码：

function save_email(){
    let idemail = document.getElementById('email');
    localStorage.setItem('email', this.idemail.value);
}

点击按钮后，该组件关闭，没有任何东西进入存储。如何解决？

【问题讨论】：

标签： html typescript local-storage angular-cli

【解决方案1】：

使用 Angular 表单来处理这类事情总是要好得多。

模板

<form #f="ngForm" [ngFormOptions]="{updateOn: 'blur'}" novalidate>
    <label>
    <span>Email</span>
    <input
      type="email"
      name="email"
      ngModel
      placeholder="Your email">
  </label>
    <label>
    <span>Age</span>
    <input
      type="number"
      name="age"
      ngModel
      placeholder="age">
  </label>
  <button type="submit" (click)="submit(f.value)">Submit</button>
</form>

组件

  submit(value){
    console.log(value);
    localStorage.setItem('data',JSON.stringify(value));
  }

同样link的工作示例

更多关于 template-driven 和 data-driven 形成 Angular

【讨论】：

谢谢！那么如何调用已保存的信息呢？让storedEmail = localStorage.getItem('data.email');不工作
我的问题已经解决了

【解决方案2】：

首先，不要调用onclick，而是应该在角度使用(click)。其次，不要尝试从 dom 中获取数据，而是使用NgModel 绑定。

https://stackblitz.com/edit/angular-ah8fst

【讨论】：

itsngModel 不是NgModel
谢谢。如果我应该保存更多信息呢？我必须写这样的东西：公共电子邮件：字符串； public saveEmail() { localStorage.setItem('email', this.email);多次使用不同的变量名，或者我可以只创建一个函数： saveValue(storageValue: string) { localStorage.setItem('storageValue', storageValue);但我的函数只会将信息存储在“storageValue”中，但我想在电子邮件、姓名等中存储信息