为什么从表单输入保存到localStorage的字符串是空的？

• 获取name输入框值的代码定义在全局作用域，会在页面加载完成后立即执行，此时用户尚未在输入框中填写内容，name变量存储的是初始空值。
• 点击保存按钮执行SaveData方法时，会直接将提前获取的空值存入localStorage，因此调用LoadData读取数据时返回空内容。

将获取输入框值的逻辑移入SaveData函数内部，保证点击保存按钮时才会实时读取当前输入的内容，修复后的代码如下：

function SaveData() {
    // 点击保存时实时读取输入框的最新内容
    var name = document.getElementById("name").value;
    localStorage.setItem("name", name);     
}
function LoadData() {
    var data = localStorage.getItem("name");
    alert(data);
}

如果需要同时存储表单中的年龄字段，可参考扩展实现：

function SaveData() {
    var name = document.getElementById("name").value;
    var age = document.getElementById("age").value;
    localStorage.setItem("name", name);
    localStorage.setItem("age", age);     
}
function LoadData() {
    var name = localStorage.getItem("name");
    var age = localStorage.getItem("age");
    alert(`姓名：${name}，年龄：${age}`);
}

内容的提问来源于stack exchange，提问作者James Ren