将表单值保存到 localStorage

Question

我学习 JS 有一段时间了，所以在某些时候无法完成我老师给我的作业，所以它就是要创建一个输入来填充 3 个选择器来更改文本的某些属性。

我想做的是：
每当用户关闭页面并再次打开它时 - 将 localStorage 中的值应用回表单，并将样式应用到元素。即：

Font: Roboto
Color: Green
fontSize: 24px

我应该怎么做，为什么我的代码是错误的？
这是代码：

function iterator() {
  for (let i = 16; i <= 30; i++) {
    let fontsSize = document.getElementById("fontsSize");
    let CreateElmt = document.createElement("option");
    fontsSize.append(CreateElmt);
    CreateElmt.textContent = i + "px";
    CreateElmt.value = i + "px";
  }
}
iterator();

function finalItreator() {
  let parent = document.querySelector(".daddyDiv");
  let div = document.querySelector(".paragragh");
  let Fonts = document.getElementById("Fonts");
  let Colors = document.getElementById("Colors");
  let fontSizes = document.getElementById("fontsSize");
  parent.addEventListener("input", (e) => {
    window.localStorage.setItem("Font", Fonts.value);
    window.localStorage.setItem("Color", Colors.value);
    window.localStorage.setItem("FontSize", fontSizes.value);
    div.style.fontFamily = Fonts.value;
    div.style.color = Colors.value;
    div.style.fontSize = fontSizes.value;
    for (i = 0; i < Fonts.children.length; i++) {
      if (Fonts.children[i].value === window.localStorage.getItem("Font")) {
        Fonts.forEach((e) => {
          e.removeAttribute("selected");
        });
        Fonts.children[i].classList.add("active");
      }
      if (Fonts.children[i].classList.contains("active")) {
        Fonts.children[i].setAttribute("selected", "");
      }
    }
  });
}
finalItreator();

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

<form class="daddyDiv">
  <select name="Fonts" id="Fonts">
    <option value="Open Sans">Open Sans</option>
    <option value="Cairo">Cairo</option>
    <option value="Roboto">Roboto</option>
  </select>
  <select name="Colors" id="Colors">
    <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 name="fontsSize" id="fontsSize"></select>
  <div class="paragragh" contenteditable="true"></div>
</form>

Answer 1

无需在 for 循环中针对同一元素一次又一次地查询 DOM。
预先缓存您计划重用的元素。
当变量值在您的应用程序生命周期内不会改变时使用const
“paragragh” 是什么意思你是说 paragraph？（顺便说一句，这是一个 DIV）
如果您已经使用 name

id

如果函数的工作显然是用 <option> 填充 Select 框，则不要将函数命名为 iterator。 createFontSizeOptions 似乎是更好的选择。
不要命名一个函数finalItreator它没有任何意义。
尽可能简洁、有意义和简短地描述您的函数名称。
（其实你根本不需要那些功能）
不要将您的 ID 命名为 PascalCase。使用驼峰式。
将 "input" 事件分配给 class 选择器，即：.command 分配给您的 Select（或其他输入）元素。
使用适当的 name，其值正是预期的 CSS 属性作为驼峰式大小写，即：fontFamily 或 fontSize
使用 JSON.stringify
使用 JSON.parse
创建三个函数，一个从 localStorage 获取字符串作为对象，第二个将对象保存到 localStorage，第三个使用 [=27] 将 key/value 对样式应用于所需元素=]
创建一些可重复使用的 DOM 实用程序来帮助您获取或创建 DOM

（由于出于安全原因 Stack Overflow Snippets 不接受从 Iframe 访问 localStorage，这里是 live jsFiddle demo）

代码：

// 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>

将表单值保存到 localStorage

Save form values to localStorage

html

javascript

frontend

user-input