主页 / 问题 / 817936
Accepted
Анатолий
Asked:2020-04-23 07:28:54 +0000 UTC2020-04-23 07:28:54 +0000 UTC

关闭选项卡或窗口时如何在浏览器中保留表单文本？

  • 772

这样的任务。

有一个发送消息的表格，一个人写了一条长消息，突然间，由于注意力不集中，决定关闭标签，但同时忘记发送他的长文。

以下是如何在浏览器缓存中保存已键入但未发送的文本，这样如果有人再次打开表单以发送消息，请在此处插入此文本。

据我了解，关闭选项卡或窗口时键入的文本需要输入到缓存中，并带有表单 id 的文本，将来需要在其中插入该文本，但如果发送了消息，那么你可能应该删除输入缓存的内容。

告诉我往哪个方向挖？

php

2 个回答

  1. Best Answer

    可用方法概述

    在客户端上，您可以使用以下方式存储信息：

    • 饼干
    • HTML 5 网络存储

    在 HTML5 之前，在本地存储数据的唯一方法是使用 cookie 机制，该机制最初旨在在 Web 服务器和浏览器之间交换少量标识信息。Cookie 非常适合存储少量数据，但使用它们的 JavaScript 模型有点笨拙。cookie 系统还迫使开发人员摆弄过期日期，并在每次页面请求时通过 Internet 来回发送数据。

    因此，如果每个或大多数请求的服务器都不需要您要存储的信息，那么最好使用另一种解决方案。

    在 HTML5 中，出现了Web Storage API用于这些目的，它提供了将数据保存在访问者浏览器存储中的能力，并且可以方便地处理永久数据（localStorage）或关闭选项卡时删除的临时数据（sessionStorage ） )

    对于您的任务，即存储反馈表的文本，使用网络存储，即localStorage是理想的。

    使用 localStorage 的示例

    通过 key 将数据写入存储：

    localStorage.setItem("key", "value");

    通过键从存储中检索数据：

    localStorage.getItem("key");

    从存储中删除数据：

    localStorage.removeItem("key");

    了解有关使用 HTML5 Web 存储的更多信息

    • 5

  2. 我将添加一个示例：

    // при загрузке страницы (когда DOM готова)
document.addEventListener('DOMContentLoaded', () => {
  // восстановление ранее сохраненных данных 
  let savedFormData = localStorage.getItem('formData');  // пробуем считать JSON-строку с объектом, хранящим введенные пользователем данные
  if (savedFormData) {                                   // если ранее мы ничего не сохранили, getItem вернет null (и тогда условие не выполнится)
    savedFormData = JSON.parse(savedFormData);           // преобразуем JSON-строку с данными в объект 
    // к примеру, у нас есть поля ввода #subject и #message
    document.getElementById('subject').value = savedFormData.subject; 
    document.getElementById('message').value = savedFormData.message; 
    localStorage.removeItem('formData');                 // после того как мы восстановили сохраненные данные, удаляем запись в localStorage
  }

  // сохранение данных, введенных пользователем 
  window.addEventListener('beforeunload', e => {           // назначаем слушателя события, которое возникает при уходе со страницы
    let subj = document.getElementById('subject').value,   // получаем значения содержимого полей ввода 
        msg  = document.getElementById('message').value; 
    if (subj.length || msg.length) {                       // если текст хотя бы в одном из полей ввода не нулевой длины
      let formData = {                                     // создаем объект, содержащий введенные пользователем данные 
        subject: subj, 
        message: msg
      };
      // записываем JSON-строку только что созданного объекта с данными
      localStorage.setItem('formData', JSON.stringify(formData)); 
    }
  }); 
});
    • 0

相关问题