Question

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

试图学习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类，您可以为需要在应用中其他位置重复的内容（例如attributes文本区域等）创建input。这样，您可以存储FormInformation的实例，并使用执行document.querySelector()时得到的值设置属性，然后重用

我如何使其面向对象

1 个答案: