如何通过window.localStorage实现新标签页保留输入框值？

当然可以用window.localStorage搞定这个需求！我来给你调整现有代码，让新打开的标签页能完美保留输入框里的内容：

1. 实时把输入值存入localStorage #

首先给输入框加个id方便获取元素，然后监听输入事件，把用户输入的内容实时存到localStorage里——同一个域名下的标签页可以共享localStorage的数据，这就是跨标签页同步的关键。

修改你的HTML：

<input 
  id="inputText"
  style="border: red solid 2px;" 
  placeholder=" enter text..."
>
<button id="btn" style="background:red" (click)="openNewTab()" routerLink="/{{ href }}"> Open-In-New-Tab > </button>

然后在组件的ngOnInit里添加监听逻辑，同时页面加载时先读取localStorage的值回显：

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, ''));
 
 // 新增：处理输入框的存储与回显
 const inputEl = document.getElementById('inputText') as HTMLInputElement;
 // 页面加载时，从localStorage读取之前保存的值
 inputEl.value = localStorage.getItem('inputValue') || '';
 // 监听输入变化，实时存入localStorage
 inputEl.addEventListener('input', () => {
   localStorage.setItem('inputValue', inputEl.value);
 });
 
 // 原有路由参数处理逻辑
 this.route.queryParams.subscribe(params => {
 if (params.show === 'false') {
 document.getElementById('navigation').outerHTML = '';
 document.getElementById('btn').outerHTML = '';
 }
 });
 }
}

2. 新标签页加载时自动回显值 #

因为新标签页和原页面属于同一个域名，所以初始化时会自动执行上面的ngOnInit逻辑，读取localStorage里的inputValue并设置给输入框，这样打开新标签页时输入内容就不会消失了。

额外优化选项 #

如果你希望用户关闭浏览器后自动清除这个输入值，可以把localStorage换成sessionStorage，用法完全一样，只是sessionStorage的数据会在标签页关闭后自动清空。

内容的提问来源于stack exchange，提问作者Ana_30