javascript - 我怎样才能使其面向对象

Question

我有一个使用存储 API 的 js 文件。它只是保存表单信息，以便在您必须在新 session 中再次填写表单时获取它们。它还重新使用这些信息将它们放置在页面的其他位置，而无需刷新页面。它正在工作，但我想以面向对象的方式实现它。

尝试学习 OOP(初学者)并使用不在 window.onload 事件中工作的对象中的代码创建一个函数。

// STORAGE

// Used Elements
let input_textarea = document.querySelector('#firstname_area');
let input_textarea_bis = document.querySelector('#lastname_area');
let chosen_station = document.querySelector('#station')
let output_div = document.querySelector('.personal-greeting');
let output_station = document.querySelector('#custumerstation'); 
let save_button = document.querySelector('.send');

// Onclick start function
save_button.addEventListener('click', updateOutput);

// Saved Elements
output_div.textContent = localStorage.getItem('content');
input_textarea.value = localStorage.getItem('content');
input_textarea_bis.value = localStorage.getItem('contentbis');
chosen_station.innerHTML = sessionStorage.getItem('content');

// Function actions setting saved elements
function updateOutput() {
  localStorage.setItem('content', input_textarea.value);
  localStorage.setItem('contentbis', input_textarea_bis.value);
  output_div.textContent = input_textarea.value;
  output_station.textContent = chosen_station.innerHTML;
}

Answer 1

通过创建 FormInformation 类，您可以为需要在应用程序中其他位置重复的内容(例如 input 文本区域字段)创建属性，等等...这样，您可以存储 FormInformation 的实例，并使用执行 document.querySelector() 时获得的值设置属性，然后重用它