Как я могу сделать это объектно-ориентированным

Question

У меня есть файл js, который использует API хранилища. Просто сохраните информацию о форме, чтобы получить их, если вам придется заполнять форму снова в новом сеансе. Он также повторно использует эту информацию, чтобы разместить их где-то еще на странице без обновления страницы. Это работает, но я хотел бы сделать это объектно-ориентированным способом.

Попытался изучить ООП (новичка) и создать функцию с кодом, который не находится в объекте, работающем с событием 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 класс, вы можете создать attributes для вещей, которые вам нужно повторить в другом месте вашего приложения, таких как input поля текстовой области и т. Д. Таким образом, вы можете хранить экземпляр FormInformation и установите атрибуты со значениями того, что вы получили при выполнении document.querySelector() и повторно используйте его