2

Такая задача.

Есть форма отправки сообщений, человек написал длинное сообщение и вдруг по невнимательности решил закрыть вкладку но при этом забыл отправить свое длинное сочинение.

Вот как сохранить текст который был набран но не отправлен в кеше браузера, чтобы если человек когда откроет снова форму отправки сообщения этот текст туда вставить.

Я так понимаю набранный текст при закрытие вкладки или окна нужно занести в кеш и с текстом id формы куда в будущем нужно будет вставить этот текст, но если сообщение было отправлено то нужно наверное удалять то что заносили в кеш.

Подскажите в какую сторну копать?

2 ответа 2

5

Обзор доступных методов

На клиенте вы можете хранить информацию с помощью:

  • Cookies
  • HTML 5 Web Storage

До HTML5 единственным способом локального хранения данных было использование механизма файлов cookies, который первоначально был разработан для обмена небольшими объемами идентифицирующей информации между веб-серверами и браузерами. Файлы cookies подходят идеально для хранения небольших объемов данных, но модель JavaScript для работы с ними несколько неуклюжа. Система файлов cookies также вынуждает разработчика возиться со сроками действия и бесполезно пересылать данные туда и обратно по интернету с каждым запросом страницы.

Поэтому, если информация, которую вы собираетесь хранить, не нужна серверу с каждым или большинством запросов, то лучше использовать другое решение.

В HTML5 для этих целей появился Web Storage API, который предоставляет возможность сохранять данные в хранилище браузера посетителя, и дает возможность удобно работать с постоянными данными (localStorage) или временными данными, которые удаляются при закрытии вкладки (sessionStorage)

Для вашей задачи, а именно хранения текста формы обратной связи, идеально подходит использование веб-хранилища, а именно localStorage.

Пример работы с localStorage

Запись данных в хранилище по ключу:

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

Получение данных из хранилища по ключу:

localStorage.getItem("key");

Удаление данных из хранилища :

localStorage.removeItem("key");

Подробная информация о работе с HTML5 Web Storage

0

Дополню примером:

// при загрузке страницы (когда 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)); 
    }
  }); 
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.