Javascript 尝试在使用localStorage刷新后保留文本输入值，什么'；我的代码怎么了？

我试图在给定的文本框中获取新的输入值，以便在刷新后保存。以下是我的尝试：

事件处理程序脚本：

//store value after changes
function store(){
    var text = document.getElementById("qty").value;
    localStorage.setItem("qty",text);
}
//local storage to keep values after refresh
function getValue(){
    var storedText = localStorage.getItem("qty");

    if(storedText != null){
        document.getElementById("qty").value = storedText; 
    }
    else
        document.getElementById("qty").value = 0;
}

事件注册脚本：

document.getElementById("qty").onkeyup = store;
document.getElementById("qty").onload = getValue;

HTML:

我的推理是，一旦更改了值（

onkeyup

），就将新值设置为

localStorage

。然后，如果我刷新页面，

onload

应该激活并使用

getValue（）

将文本框值设置为以前设置的

localStorage

值。 然而，当我刷新时，它总是1。我想我可能对

localStorage

有些误解。谢谢你的帮助

*编辑：通过将

getValue

更改为

getValue（）

但是现在我有了一个新问题：

---

我有多页的文本输入框。现在我已经开始保存新的输入，它也会更改所有其他文本框的输入值，因为它们都有相同的id。有没有一种方法可以让它们保存自己修改的值，而不是在不更改id的情况下保存所有相同的值？

我在JSFIDLE-（）上测试了这一点，切换了这一行：

document.getElementById（“数量”）.onload=getValue

致：

document.getElementById（“数量”）.onload=getValue（）

通过这一细微的修改，它似乎可以正常工作

感谢@Heretic Monkey指出输入元素没有
onload
事件

最好使用您的代码执行此操作，并在加载DOM后运行此操作：

document.addEventListener("DOMContentLoaded", function() {
    //document.getElementById("qty").onkeyup = store;
    //Better to use .addEventListener()
    document.getElementById("qty").addEventListener("keyup", store, false); 
    getValue(); // Just call the function as this event will fire once the DOM
                //Including your input has loaded
});

你说得对！它确实奏效了，你知道为什么吗？这是因为“onload”的性质吗？它只是在运行函数，没有引用
input
@hereticsmonkey的
onload
事件（不存在）。我得查一下。谢谢你们的澄清。谢谢你们，我还有一个问题：我有多页的文本输入框。现在我已经让它来保存新的输入，它也会更改所有其他文本框的输入值，因为它们都有相同的id。有没有办法让它们保存自己修改过的值而不是所有相同的值而不更改id？@HelloWorld您可以通过
className
，将事件侦听器添加到输入中，当有多个元素使用相同的事件侦听器函数时，这是一种常见的方法。请参阅此相关帖子（）。使用
时，您可以在回调函数内部使用关键字
this
。addEventListener
引用触发回调的元素，然后可以获取输入的唯一id，并将其用作
本地存储的键/值
通常最好使用
addEventListener（'load'，fn）
而不是分配给
onload
。首先，您可以添加多个侦听器，而无需覆盖最后添加的侦听器。另外，
输入
元素不公开
加载
事件；这就是答案“有效”的原因：它在任何事件触发之前运行函数。
document.addEventListener("DOMContentLoaded", function() {
    //document.getElementById("qty").onkeyup = store;
    //Better to use .addEventListener()
    document.getElementById("qty").addEventListener("keyup", store, false); 
    getValue(); // Just call the function as this event will fire once the DOM
                //Including your input has loaded
});