Блог

Главная - Вопросы по программированию - Данные формы не сохраняются в локальном хранилище, за исключением случаев, когда я обновляю браузер

Данные формы не сохраняются в локальном хранилище, за исключением случаев, когда я обновляю браузер

#javascript #html

Вопрос:

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

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

Даже после обновления и просмотра данных в localStorage я открываю новый браузер, запускаю форму. Я проверяю localStorage, но данные не отображаются.

Я буду признателен вам за совет.

Спасибо

После отправки формы введите описание изображения здесь

После перезагрузки страницы введите описание изображения здесь

HTML-код

 <form action="https://formspree.io/f/xwkaygyj" method="POST">
       <div class="name">
         <input id="name" type="text" name="name" required        placeholder="Name" oninput="onChangeHandler(this)"/>
       <input id="email" type="email" name="email" required placeholder="example@gmail.com" oninput="onChangeHandler(this)"/>
      <textarea id="message" name="message" cols="30" rows="7" maxlength="500" placeholder="Write your message here" required oninput="onChangeHandler(this)">
       </textarea>
                
     <button type="submit">Send</button>
   </div>
</form>

Код Javascript

 const formName = document.getElementById('name');
const email = document.getElementById('email');
const message = document.getElementById('message');


let formData = { name: '', email: '', message: '' };

const onChangeHandler = (event) => {
  switch (event.name) {
    case 'name':
      formData = { ...formData, name: event.value };
      break;
    case 'email':
      formData = { ...formData, email: event.value };
      break;
    case 'message':
      formData = { ...formData, message: event.value };
      break;
    default:
      break;
  }
  localStorage.setItem('data', JSON.stringify(formData));
};
const reloadBrowser = JSON.parse(localStorage.getItem('data'));
if (reloadBrowser) {
  formName.value = reloadBrowser.name;
  email.value = reloadBrowser.email;
  message.value = reloadBrowser.message;
}

Комментарии:

1. я попробовал в jsfiddle, и он работает, я не вижу никаких проблем jsfiddle.net/amirrahman132132/netqf59u

2. Форма будет отлично работать с localStorge . при каждом изменении с входными данными, будут сохранены на localStorage as name , email и message . Проблема возникла после отправки формы. @АмирРахман

3. Спасибо, @AmirRahman, есть ли какие-либо обходные пути после отправки формы?

4. У вас нет доступа к другому домену с локальным хранилищем , только с тем же корнем . Локальное хранилище — это не серверная часть.

5. Здорово. Спасибо

Ответ №1:

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

 $.ajax({
  type: 'POST',
  url: $("form").attr("action"),
  data: $("form").serialize(), 
  //Or your custom data
  success: function(response) { 
     localStorage.setItem('data', JSON.stringify(formData));
  },
});
Метки: , ,