LocalStorage 在頁面刷新后不持久化數據

Question

我的 React 表單中的 localStorage 的 getItem 有問題。 我放了一個 onChange 屬性：

<div className = 'InputForm' onChange={save_data}>

我找到了 setItem 函數來存儲數據。這是函數：

 function save_data(){

  let textarea = document.querySelectorAll("textarea")
  let input = document.querySelectorAll("input[type='text']")
  let saved_fields = []
                                                              
 textarea.forEach(x => {

  saved_fields.push({
  key: x.className,
  value: x.value
  })
                                      
 })
                              
 input.forEach(x => {
  saved_fields.push({
  key: x.className,
  value: x.value
  })
                                    
 })
                                  
localStorage.setItem("saved_data", JSON.stringify(saved_fields))

}

我的主要問題是在頁面重新加載后我找不到將數據放回頁面的方法。 我剛剛發現如何在控制台中保留我的所有輸入：

 window.onload = dataLoad();
                                
 function dataLoad () {

  let show_saved_data = localStorage.getItem("saved_data");
                                  
  console.log('show_saved_data:',JSON.parse(show_saved_data));

 }

你們能幫我找到檢索/保留數據功能嗎？

編輯：這是表單的 html，我使用來自另一個組件的道具。 我不知道這是否可以改變我需要使用的功能。

  <InputFields 
    stateKey = 'contactInfo' 
    key = {props.contactInfo.id}
    completedFields = {props.contactInfo}
    templateFields = {props.templates.contactInfo}
    onDataEntry = {props.onDataEntry}
    newField = {props.newField}
  />

Answer 1

我們可以提供您的 HTML 表單來幫助您嗎？ 您不應該通過它們的類名來識別您的輸入/文本區域。

之后，通過使用 ID 作為輸入/文本區域的標識符，您只需反向執行：

• 獲取您的輸入/文本區域列表
• forEach items，根據ID設置值

function dataLoad () {
  var show_saved_data = localStorage.getItem("saved_data");
  var inputList = JSON.parse(show_saved_data);
  inputList.forEach(x => {
    document.getElementById(x.key).setAttribute('value', x.value);
  })
}

給我們您完整的 HTML/JS 將更容易為您提供完整的解決方案。