Question

我刚开始学习javascript。我想要做的是在使用localStorage在按钮内按“保存”并更改其名称后存储输入的值。感谢。

<h3 id="titlu" class="bh">Chat</h3>
<input type="button" name="userName" id="Uname" class="Uname" value="Username"/>
<div id="popUp">
    <p>Set your username:</p>
    <input type="text" name="setusername" id="userSet">
    <input type="button" id="save" class="pophide" name="save" value="save"/>
</div>

$(document).ready(function(){
    $("#save").click(function(){
        var valoare = $("#userSet").val();
        if (typeof(Storage) !== "undefined") {
            // Store
            localStorage.user = valoare;
            // Retrieve
            document.getElementById("Uname").innerHTML = localStorage.user;
        } else {
            document.getElementById("Uname").innerHTML = "Sorry, your browser does not support Web Storage...";
       }
    });
})

Answer 1

您的代码通常很好。我能看到的唯一真正的问题是你最后如何设置文本。

由于Uname是<input type="button">，您的使用方式与<input type="text">类似。要更改显示的文字，您需要设置value属性，而不是innerHTML。

当您使用jQuery时，您可以像以前一样使用val()来读取输入值：

$("#Uname").val(localStorage.user);

第二个小问题。使用localStorage.user通常很好，但使用标准调用setItem()和getItem()更安全，以避免与Storage对象的现有属性冲突，例如localStorage.setItem = 'My Set Item'会给你带来麻烦。

以下内容对您有用：

$(document).ready(function(){
    // display previous stored username, if set
    var prevUname = localStorage.getItem("user");
    if(prevUname !== null) {
        $("#Uname").val(localStorage.getItem("user"));
    }

    $("#save").click(function(){
        var valoare = $("#userSet").val();
        if (typeof(Storage) !== "undefined") {
            // Store
            localStorage.setItem("user", valoare);

            // Retrieve
            $("#Uname").val(localStorage.getItem("user"));
        } else {
            $("#Uname").val("Sorry, your browser does not support Web Storage...");
       }
    });
})

Working jsFiddle

如何使用localStorage存储按钮的值和输入

1 个答案: