第 58 期(W3C 标准-JavaScript-存储)：保存文本域的内容刷新不丢失

[wingmeng]

任务：

已知有如下文本域（多行文本框），如果用户在输入大量的内容后，页面因偶然因素被刷新了，造成输入内容全部丢失，这绝对是一种让人抓狂的使用体验。那如何实现文本域的输入内容在页面刷新后不丢失？另外，在页面关闭后下次打开时文本域应恢复初始空值呢？

注：为降低代码复杂度，假设文本域中只输入数字和字母。

<textarea id="input" cols="30" rows="10"></textarea>

思路： 首先很自然而然的会想到用 localStorage 去解决，监听文本域的 input 事件，并将其值实时保存到 localStorage 中，然后在页面刷新重载后检查 localStorage 的值并回填到文本域中。 然而任务的后半部分要求在页面关闭后下次打开时文本域应恢复初始空值，也就是说页面在关闭时应该清空 localStorage 里保存的文本域的值，监听页面的 onbeforeunload 事件并在其中做文本域保存值的清空操作吗？原理上可行，然而并不是最佳实践。 这时轮到 sessionStorage 出场了，它与 localStorage 非常相似，不同之处在于 sessionStorage 里面的数据会在页面会话结束时被清除，所以用 sessionStorage 来存储文本域输入值的话，页面关闭后会自动清空保存的值，这非常符合我们任务要求里的实现细节。据此，可以编写出以下代码：

var input = document.getElementById('input');

if (sessionStorage.getItem('autoSave')) {
  // 将 sessionStorage 中保存的值回填到文本域
  input.value = sessionStorage.getItem('autoSave');
}

input.addEventListener('input', function() {
  // 实时存储文本域的值到 sessionStorage 中
  sessionStorage.setItem('autoSave', this.value);
});