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

问题描述 投票：2回答：4

这是我试过的方法。我添加了一个反馈，仅用于测试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>
javascript html local-storage
4个回答
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

0
投票

使用input元素的value从值表单中检索它，否则你将获得一个对象。

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

这是一个非常简单的修复，你只需要在第二个函数结束时添加value属性。

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

您没有初始化您的变量。

这是一个有效的代码。

<!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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.