Установить несколько вариантов выбора из сохраненных значений локального хранилища

Question

Я пытаюсь установить несколько вариантов выбора для выбранных на основе соответствующего значения localalstorage.

Работает сохранение значений в массиве в localstorage, но мне нужна помощь в выборе параметров в форме на основе этих значений.

Значения в localalstorage собираются из флажков следующим образом:

jQuery(document).ready(function(){
    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    checkboxes = jQuery(".add-selectie :checkbox");
    checkboxes.on("change", function(){
        checkboxes.each(function(){
            checkboxValues[this.id] = this.checked;
        });
        localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
    });
    jQuery.each(checkboxValues, function(key, value) {
        jQuery('#' + key).prop('checked', value);
    });
});

Это сохраняет значения в массиве с ключом "checkboxValues" в localstorage, например:

{"value1":true,"value2":true,"value3":false}

Но как мне предварительно заполнить параметры выбора в форме, если значение найдено в localstorage AND и установлено значение true?

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

Answer 1

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

Обратите внимание, что при использовании localStorage при выполнении стекового потока возникает проблема безопасностив контексте так

• Я создал собственный одноэлементный / статический класс CustomLocalStorage с аналогичными методами.
• Кроме того, я использовал полный объект OptionValueObject для поддержки свойств флажка ивыбрать элементы.

var CustomLocalStorage = (function() {
  var items = {};

  function getItem(itemKey) {
    for (var _itemKey in items) {
      if (_itemKey === itemKey) {
        return JSON.parse(items[itemKey]);
      }
    }

    return null;
  }

  function setItem(itemKey, itemValue) {
    items[itemKey] = JSON.stringify(itemValue);
  }

  return {
    getItem: getItem,
    setItem: setItem
  }
})();

function OptionValueObject(id, label, value) {
  this.id = id; // Used to identify checkboxes
  this.label = label; // Not used in this example
  this.value = value; // To bind it to select > option > value property
  this.checked = true; // To bind it to checkbox > checked property
}

$(document).ready(function() {

  function initialize() {
    initializeData();
    initializeUi();
  }

  function initializeData() {
    var optionValueObjects = [];
    optionValueObjects.push(new OptionValueObject(1, 'Label of option 1', 'value1'));
    optionValueObjects.push(new OptionValueObject(2, 'Label of option 2', 'value2'));
    optionValueObjects.push(new OptionValueObject(3, 'Label of option 3', 'value3'));

    CustomLocalStorage.setItem('options', optionValueObjects);
  }

  function initializeUi() {
    var optionValueObjects = CustomLocalStorage.getItem('options');
    for (var i = 0; i < optionValueObjects.length; i++) {
      var optionValueObject = optionValueObjects[i];
      var id = optionValueObject.id;
      
      // Checkbox: Identify element and set UI related property
      var checkboxElement = $('#checkbox' + id);
      checkboxElement.prop('checked', optionValueObject.checked);
      console.log(optionValueObject.value);
      // Option: Identify element and set UI related property
      var optionElement = $("#optionsSelect > option[value='"+ optionValueObject.value +"']");
      optionElement.prop('selected', optionValueObject.checked);
    }
  }

  function handleEvents() {

    function checkboxChangeHandler() {
      // Get the object, update the checked property and save it back
      
      // 1. Get the object
      var id = $(this).prop('id');
      var optionValueObjects = CustomLocalStorage.getItem('options');
      var optionValueObject = optionValueObjects.filter(function(optionValueObject) {
        if (('checkbox' + optionValueObject.id) === id) {
          return optionValueObject;
        }
      })[0];
      
      // 2. Update the checked property
      var checked = $(this).prop('checked');
      optionValueObject.checked = checked;
      
      // Bind the checked property to options selected property
      var optionElement = $("#optionsSelect > option[value='"+ optionValueObject.value +"']");
      optionElement.prop('selected', optionValueObject.checked);

      // 3. Save it back
      CustomLocalStorage.setItem('options', optionValueObjects);
    }

    $('#checkbox1').change(checkboxChangeHandler);
    $('#checkbox2').change(checkboxChangeHandler);
    $('#checkbox3').change(checkboxChangeHandler);
  }

  initialize();
  handleEvents();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="add-selectie">
  <input id="checkbox1" class="selector" type="checkbox"><label for="checkbox1">Value 1</label>
  <input id="checkbox2" class="selector" type="checkbox"><label for="checkbox2">Value 2</label>
  <input id="checkbox3" class="selector" type="checkbox"><label for="checkbox3">Value 3</label>
</div>

<form>
  <select id="optionsSelect" multiple="multiple">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
  </select>
</form>