尝试在使用 localStorage 刷新后保留文本输入值，我的代码有什么问题？

Question

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

事件处理程序脚本：

//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:

<input type="text" id="qty" name="qty" class="small w-25 text-right" value="1">

我的理由是，一旦更改了值 (onkeyup)，请将新值设置为 localStorage。然后，如果我刷新页面，onload 应该激活并使用 getValue() 将文本框值设置为先前设置的 localStorage 值。但是，当我刷新时，它总是 1。我想我可能对 localStorage 有一些误解。感谢任何帮助。

*编辑：感谢下面的评论，将 getValue更改为getValue()

，使其正常工作

但是现在我遇到了这个新问题：

我在多个页面上都有文本输入框。现在我已经让它开始保存新输入，它还会更改所有其他文本框的输入值，因为它们都具有相同的 ID。有没有办法让他们保存自己修改的值，而不是在不更改 ID 的情况下保持不变？

Answer 1

我在 jsfiddle 上测试了这个 - (https://jsfiddle.net/dyLbgfk2/17/)，切换了这一行：

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

收件人：

document.getElementById("qty").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
});

尝试在使用 localStorage 刷新后保留文本输入值，我的代码有什么问题？

Trying to get text input values to stay after refresh with localStorage, what's wrong with my code?

html

javascript

dom

local-storage

dom-events