Сохранить значения формы в localStorage

• Нет необходимости снова и снова запрашивать DOM внутри цикла for для одного и того же элемента. Кэшировать элементы, который вы планируете повторно использовать заранее.
• Используйте const, когда значение переменной не изменится в течение жизни вашего приложения.
• Что значит "параграф" ты имеешь в виду параграф? (Кстати, это ДЕЛ)
• Нет необходимости использовать id, если вы уже используете name
• Не называйте функцию iterator, если ее задача явно состоит в том, чтобы заполнить поле «Выбор» <option>s. createFontSizeOptions кажется лучшим выбором.
• Не называйте функцию finalItreator, это ничего не значит.
  Описывайте имена функций как можно лаконичнее, осмысленнее и короче.
• (На самом деле вам эти функции вообще не нужны)
• Не называйте PascalCase вашего идентификатора. Используйте верблюжий регистр.
• Назначьте событие "input" селектору класса, то есть: .command, который назначен вашим элементам Select (или другим введенным элементам).
• Используйте правильный name, значение которого точно соответствует ожидаемому свойству CSS как camelCase, то есть: fontFamily или fontSize
• Сохраните в LocalStorage литерал строкового объекта, используя JSON.stringify
• Получить из localStorage, используя JSON.parse
• Создайте три функции, одну из которых получает строку как объект из localStorage, вторую — для сохранения объекта в localStorage, а третью — для применения стилей пар ключ/значение к нужному элементу с помощью Объект.назначить.
• Создайте несколько многоразовых утилит DOM, которые помогут вам получать или создавать элементы в DOM.

(Поскольку фрагменты переполнения стека по соображениям безопасности не принимают доступ к localStorage из Iframe, вот живая демонстрация jsFiddle)

Код:

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


// TASK:

// Cache DOM Elements:
const elForm = el("#formSettings"); // It's not a ".daddyDiv"... it's a Form!
const elEditable = el("#editable"); // It's an editable div! (What means "paragragh" anyways?!)
const elsCommand = els(".command"); // All your input/selects
const elFontSize = el("[name=fontSize]");

// Create the font-size Options
// (You don't need a function here if it's a one-time operation on DOM ready)
for (let i = 16; i <= 30; i++) {
  elFontSize.append(elNew("option", {
    textContent: `${i}px`,
    value: `${i}px`
  }));
}

const commandsGet = () => {
  // If we have no commands stored in localStorage, save them!
  if (!localStorage.commands) commandsSave();
  // Convert string from localStorage to Object Literal
  const commands = JSON.parse(localStorage.commands);
  // Apply values to DOM input/select elements by name
  Object.entries(commands).forEach(([name, value]) => {
    el(`[name = "${name}"]`).value = value;
  });
};

const commandsSave = () => {
  // Create an Object of the commands to save to localStorage
  const commands = [...elsCommand].reduce((obj, elem) => {
    obj[elem.name] = elem.value;
    return obj;
  }, {});
  // Convert object Literal to String and save to localStorage
  localStorage.commands = JSON.stringify(commands);
};

const commandsApply = () => {
  // Apply styles to the desired contenteditable element:
  Object.assign(elEditable.style, JSON.parse(localStorage.commands));
};

// Assign an event listener to all your inputs/selects to store and apply the 
// styles (commands) on "input"
elsCommand.forEach(elem => {
  elem.addEventListener("input", () => {
    commandsSave();
    commandsApply();
  });
});

// Init:
// On page load read the commands from LocalStorage
// and apply them to your editable element
commandsGet();
commandsApply();

/*QuickReset */

* {
  margin: 0;
  box-sizing: border-box;
}

.paragragh {
  margin: 10px auto;
  min-width: 400px;
  min-height: 300px;
  background-color: #ddd;
  text-align: center;
  padding-top: 30px;
}

<form id = "formSettings">
  <select class = "command" name = "fontFamily">
    <option value = "Arial">Arial</option>
    <option value = "Times New Roman">Times New Roman</option>
    <option value = "Courier New">Courier New</option>
  </select>
  <select class = "command" name = "color">
    <option value = "black">Black</option>
    <option value = "green">Green</option>
    <option value = "blue">Blue</option>
    <option value = "red">Red</option>
    <option value = "purple">Purple</option>
  </select>
  <select class = "command" name = "fontSize"></select>

  <div id = "editable" contenteditable = "true">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</form>