Question

我想将表单元素的值存储在本地存储上并将其显示在另一个HTML页面上，但是当我尝试从本地存储中获取时，会显示null。这是index.html。

<body>
    <form id="form" action="processed.html" onsubmit="submit();"method="get">
         <textarea name="comments" id="a1"></textarea>
         <input type="submit" value="Order Now">
    </form>

    <script type="text/javascript">
        function submit() {
            localStorage.setItem("a2", document.getElementById("a1").value);
        }
    </script>
</body>

这是processed.html

<body>
    <div id="answer">
    </div>

    <script type="text/javascript">
        document.write(localStorage.getItem("a2"));
    </script>
</body>

Answer 1

试试吧..

 <script type="text/javascript">
 function submit() {
 var value=document.getElementById("a1").value; 
 localStorage.a2=value;
  }
 </script>

Answer 2

尝试这样的事情，尝试为此获得一个jsfiddle。

*更新

这个小提琴正在起作用： https://jsfiddle.net/dxzL5qoe/

function submit() {
    let val = document.getElementById("a1").value;
    localStorage.setItem("a2", val);
    document.querySelector(".output").textContent = `saved ${val} to local storage`;
}

function getLocalstorage(key) {
    return localStorage.getItem(key);
}

function doStuff() {
    let storage = getLocalstorage("a2");
    document.querySelector(".output").textContent = `got ${storage} from local storage`;
}

<body>
    <form id="form" action="processed.html" onsubmit="submit();"method="get">
         <textarea name="comments" id="a1"></textarea>
         <input type="submit" value="Order Now">
    </form>

    <button onclick="doStuff()">Get Local Storage</button>
    <div class="output"></div>
</body>

Answer 3

使用 console.log（value）; 在代码中测试每个值包含的内容或在代码中使用断点。还可以使用检查页面（[F12] / [CTRL + SHIFT + I] - ＆gt;应用程序 - ＆gt;本地存储）来检查值是否存储在本地存储中。在我的案例中，我为你做了一个快速的例子。

HTML：

<textarea name="comments" id="comments"></textarea>
<button onclick="setItem('comment', 'comments');">Submit</button>
<div id="answer"></div>

JS：

function setItem(key, elementId) {
    var value = document.getElementById(elementId).value;
    localStorage.setItem(key, value);
    getItem(key);
}
function getItem(key){
    var localStorageValue = localStorage.getItem(key);
    document.getElementById("answer").innerHTML = localStorageValue;
}

JSFIDDLE

Javascript使用localStorage获取表单元素值将返回null

3 个答案: