在新选项卡上保留输入值

Question

当一个值输入到输入中并在新选项卡中打开窗口时，我希望该值仍显示在新选项卡上。这可以window.localStorage用来实现这一目标吗？请参阅Stackblitz<input style="border: red solid 2px;" placeholder=" enter text...">  <button id="btn" style="background:red"      (click)="openNewTab()" routerLink="/{{ href }}">    Open-In-New-Tab >  </button>export class About{  title: string = "About Page.";    public href: String = '';    constructor(private router: Router, private route:ActivatedRoute){ }  openNewTab() {    window.open('' + this.href + '?show=false', '_blank').focus();  }  ngOnInit() {    this.href = decodeURI(this.router.url.replace(/\/.*\//g, ''));    this.route.queryParams.subscribe(params => {      if (params.show === 'false') {        document.getElementById('navigation').outerHTML = '';        document.getElementById('btn').outerHTML = '';      }    });  }}实际结果：输入值在新选项卡中消失。预期结果：新打开的选项卡应该保留输入值

Answer 1

是的，确实，您可以window.localStorage通过window.sessionStorage. 我会在帖子的末尾解释原因。

您必须(change)在输入时使用事件才能保存您输入的值。您还必须添加[(ngModel)]到<input>

模板

<input [(ngModel)]="inputValue" (change)="setValue($event.target.value)">

成分

export class MyComponent {

  inputValue = '';

  ngOnInit() {

    this.inputValue = window.sessionStorage.getItem('savedValue');

  }

  setValue(value) {

    window.sessionStorage.setItem('savedValue', value);

  }

}

这将在您打开新选项卡时保留该值。请记住，如果您刷新初始页面，该值也将被保留。如果您使用sessionStorage，如果您重新打开浏览器，该值将消失。随着localStorage那会不会是视情况localStorage永不过期。

闪电战

如果您希望该值仅在页面在选项卡中重新打开时才存在，我建议您将其作为 URL 中的查询字符串传递。然后在 Angular 中，您将查看该查询字符串是否存在于 URL 中并显示该值（直接来自查询字符串，或来自存储）