Debe verificar el valor #name dentro de la función.

 function SaveData() { var name = document.getElementById("name").value; localStorage.setItem("name", name); }

Tenga en cuenta que el name se establece fuera saveData() y nunca se actualiza. Por lo tanto, cada vez que se llama a saveData() , siempre almacena el valor original de name , que (dado que la entrada del formulario no tiene valor predeterminado) es la cadena vacía. Por lo tanto, es más exacto decir que está cargando el valor predeterminado, en lugar de un valor en blanco.

Para almacenar el valor actual de la entrada, deberá actualizar el name cada vez que se llame a saveData() o acceder al valor directamente en saveData() . Dado que hay múltiples entradas, deberá hacer esto para cada entrada. Una solución simple es pasar el formulario a saveData() y hacer que examine cada una de las entradas en el formulario :

 function saveData(form) { for (elt of form.elements) { if (elt.id || elt.name) { localStorage.setItem(elt.id || elt.name, elt.value); } } }

El botón de formulario "Guardar" se actualizaría como:

 <button type="button" onclick="SaveData(this.form)">Save Data</button>

Puede realizar cambios similares en LoadData() y el botón "Cargar".

En lugar de llamar a las funciones de guardado y carga de datos desde las propiedades onclick , también puede utilizar addEventListener (que tiene ciertas ventajas, como se describe tanto en el documento MDN vinculado como en " addEventListener vs onclick " aquí en SO), pasando el formulario se manejaría de otra manera.

 <form onsubmit="onSave()"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="age">Age:</label> <input type="text" id="age" name="age"> <input type="submit" value="Save Data" /> <button type="button" onclick="LoadData()">Load Data</button> </form>

 function onSave(event){ event.preventDefault(); const { currentTarget } = event; const data = new FormData(currentTarget) Array.from(data.entries()).forEach(function([key, value]) { window.localStorage.setItem(key, value); }) }

O

 <form id="form"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="age">Age:</label> <input type="text" id="age" name="age"> <button type="button" onclick="SaveData()">Save Data</button> <button type="button" onclick="LoadData()">Load Data</button> </form>

 const form = document.getElementById("form") function onSave(event){ const data = new FormData(form) Array.from(data.entries()).forEach(function([key, value]) { window.localStorage.setItem(key, value); }) }

Revisaesto para más información