在新选项卡上保留输入值

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 {&nbsp; inputValue = '';&nbsp; ngOnInit() {&nbsp; &nbsp; this.inputValue = window.sessionStorage.getItem('savedValue');&nbsp; }&nbsp; setValue(value) {&nbsp; &nbsp; window.sessionStorage.setItem('savedValue', value);&nbsp; }}这将在您打开新选项卡时保留该值。请记住，如果您刷新初始页面，该值也将被保留。如果您使用sessionStorage，如果您重新打开浏览器，该值将消失。随着localStorage那会不会是视情况localStorage永不过期。闪电战如果您希望该值仅在页面在选项卡中重新打开时才存在，我建议您将其作为 URL 中的查询字符串传递。然后在 Angular 中，您将查看该查询字符串是否存在于 URL 中并显示该值（直接来自查询字符串，或来自存储）