离开页面后保留textarea内容？

Question

我有一个简单的 textarea 输入元素：

<textarea name="comment" id="comment"></textarea>

它位于用户将添加项目的页面上，因此它会经常被导航到和离开。如果用户在 textarea 元素中输入内容并离开，他们将不得不重新输入所有内容。

我怎样才能使在 textarea 元素中键入的任何内容都将存储，即使用户离开页面也是如此？我不希望有一个“保存”按钮，然后将其存储在 $_SESSION 或 SQL 中，我希望有一种方法可以将文本保存在那里而不必导航到新页面。澄清一下，会话是正常的，但我只是不希望用户必须按任何东西来存储它，我希望它自动。

Answer 1

解决方案

使用本地存储

window.onbeforeunload = function () {
    localStorage.setItem('comment-save', document.getElementById('commment').value);
}

然后当页面加载完毕

window.onload = function () {
    document.getElementById('comment').value = localStorage.getItem('comment-save');
}

说明

window.onbeforeunload 将在页面关闭之前运行代码。例如，您可以随时更改事件

document.getElementById('comment').input

应该在用户每次输入内容时保存该值。下一行将 textarea 值存储在名为 comment-save 的 localStorage 项目中

---

代码块将在页面加载时运行。它将找到#comment 文本区域并将其值设置为保存的评论。

最后一个问题

如果用户提交了评论，您可能不想再存储它了。在您的提交代码中，添加

localStorage.removeItem('comment-save');

为什么

为什么在 PHP 上使用它？ PHP 在保存客户端数据方面太过分了。它还浪费服务器端资源。