JQuery - Не удалось сохранить <selected> & <input> последние значения после обновления страницы

Question

Я пытаюсь сделать что-то действительно базовое, но это оказалось труднее, чем я ожидал. Короче говоря, я использую ajax для загрузки контента между страницами продукта. В нечетный случай пользователь может обновить страницу (загрузить оригинал), а затем пополнить корзину разделе ниже раздела продукта.

Я передаю элементы своей корзины между страницами (и перезаряжается) в виде таблицы значений, записанных в локальное хранилище, а затем извлекается оттуда. Все это отлично работает, за исключением ...:

ПРОБЛЕМА: Элементы «ввода» и «выбрано» не сохраняют выбранные значения и вместо этого возвращаются к тому, что выбрано по умолчанию. Я выделил это для поведения браузера, поскольку FireFox фактически сохранит выбранные значения при перезагрузке (если вы не будете повторно перезагружать). Chrome и IE будут просто перезагружаться до значения по умолчанию при перезагрузке (как и в любом из написанных select = "selected" или value, связанных с «входом» из исходного HTML).

Как заставить мгновенный атрибут переписать для «ввода» & «выбранные» элементы в момент их изменения? Как в этом примере:

  <select name="Size" class="os0" onchange="calculateTotal()"> 
      <option value="20" selected="selected">20cm sq</option> 
      <option value="30">30cm sq</option> 
      <option value="45">45cm sq</option> 
      <option value="60">60cm sq</option> 
      </select> 

Теперь, когда пользователь обновляет размер в цитате таблице, скажет 60см кв, он должен удалить выбранный = «выбранный» атрибут и фактически переписать его значение опции = «60» - он должен быть переписан самому html, иначе он не выживет.

Я надеюсь, что это понятно и может разработать больше, если кому-то нужна дополнительная информация.

Answer 1

Есть несколько способов, которыми вы могли бы достичь, что

1. Использование $_COOKIE для сохранения временных данных на стороне клиента, а затем получить это печенье каждый раз при обновлении страницы или перезагружается. Недостатком этого является клиентская сторона, данные могут быть изменены или удалены пользователем, что может снова вызвать ту же проблему. Проверьте cookies here
2. Используйте localStorage, который похож на куки, так как он также находится на стороне клиента. Проверьте localStorage here
3. Используйте $_SESSION, который безопаснее, чем localStorage и файлы cookie, так как он является серверной частью и не подлежит подделке. Но опять-таки сбережение слишком большого количества данных для сеанса может привести к проблемам позже, если одновременно на вашем сайте будет несколько обращений.

Для localStorage вы можете легко проверить выбор с помощью jquery или javascript. Для поля ввода сделать что-то вроде

if(localStorage.getItem("itemname") !== null) { 
// denotes the value exists 
$('inputName').val('localStorage item') 
} 

Аналогично для выбора: