Question

这是我尝试的方法。我添加了一个反馈，仅用于测试JavaScript变量siteName是否包含HTML文本框值中的值，但它反映的是“ [object HTMLInputElement]”。知道为什么吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Storing HTML value into Javascript local storage</title>
    </head>
    <body>
        <h1 id="2ndid">Hello</h1>

       <input type="text" id="firstid">
       <button onclick="myFunction()">LocalStorage</button>
       <button onclick="myFunction2()">Feedback</button>  

       <script type="text/javascript">
           var siteName = document.getElementById('firstid');
           function myFunction() {
               localStorage.setItem('store1', siteName);
           }
           function myFunction2() {
               document.getElementById("2ndid").innerHTML = siteName;
           }
       </script>
    </body>
</html>

Answer 1

您必须使用value属性从输入中获取实际文本。否则，它将返回输入文本字段的引用。引用的类型为HTMLInputElement，它具有value属性，该属性保存在文本字段中输入的实际数据。

<!DOCTYPE html>
<html>
<head>
<title>Storing HTML value into Javascript local storage</title>
</head>
<body>
   <h1 id="2ndid">Hello</h1>

   <input type="text" id="firstid">
   <button onclick="myFunction()">LocalStorage</button>
   <button onclick="myFunction2()">Feedback</button>  

<script type="text/javascript">
    var siteName;
    function myFunction() {
         siteName = document.getElementById('firstid').value;
         localStorage.setItem('store1', siteName);
    }
    function myFunction2() {
        document.getElementById("2ndid").innerHTML = siteName;
    }

</script>

</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Answer 2

使用输入元素的value从它的值中检索，否则您将得到一个对象。

document.getElementById("2ndid").innerHTML = siteName.value;

Answer 3

这是一个非常简单的修复程序，您只需要在第二个函数的末尾添加value属性即可。

function myFunction2() {
      document.getElementById("2ndid").innerHTML = siteName.value;
}

Answer 4

您没有初始化变量。

这里是工作代码。

<!DOCTYPE html>
<html>
    <head>
        <title>Storing HTML value into Javascript local storage</title>
    </head>
    <body>
        <h1 id="2ndid">Hello</h1>

       <input type="text" id="firstid">
       <button onclick="myFunction()">LocalStorage</button>
       <button onclick="myFunction2()">Feedback</button>  

       <script type="text/javascript">
           var siteName;
           function myFunction() {
           siteName= document.getElementById('firstid').value;
               localStorage.setItem('store1', siteName);
           }
           function myFunction2() {
               document.getElementById("2ndid").innerHTML = siteName;
           }
       </script>
    </body>
</html>

如何通过使用Javascript本地存储从HTML文本框中存储值？

4 个答案: