Как сохранить текст формы в браузере при закрытие вкладки или окна?

171
24 апреля 2018, 01:37

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

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

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

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

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

Answer 1

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

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

  • 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

Answer 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)); 
    }
  }); 
});
READ ALSO
Генератор уникальных значений php

Генератор уникальных значений php

Есть массив с датами

185
PHP Стандарты PSR

PHP Стандарты PSR

Уже несколько раз прочитал стандарты PSR для PHP, а именно PSR-0, PSR-1, PSR-2

191
Ошибка после favicon на вебсайте

Ошибка после favicon на вебсайте

У меня был сайт все нормально webmail/cpanel все былоТак потом вчера я favicon захоте поменять поменял все окей пошел спать

153
Снятие баланса и проверка баланса PHP

Снятие баланса и проверка баланса PHP

Здравствуйте помогите сделать проверку, уже два дня ищу решение так и не могу найтиНужно когда юзер жмякал кнопку то с его баланса списывалось...

149