使用 JavaScript，如何在頁面重新加載后保持用戶輸入？

Question

我使用 HTML 和 JavaScript 允許用戶輸入文本然后推送提交。 當用戶推送提交時，他的文本會顯示在頁面上。 問題是當頁面重新加載時，文本消失了。 明顯地。 這是我的代碼：

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <p id="printhere"></p> <TEXTAREA Name="content" ROWS="5" COLS="20" id = "userInput"></TEXTAREA> <button onclick="display()">post</button> <script>function display(){ var post = document.getElementById("userInput");value. document.getElementById("printhere");innerHTML = post; }</script> </body> </html>

使用 JavaScript，一旦頁面重新加載，是否仍然可以保持輸入？

Answer 1

您可以使用存儲 API（sessionStorage、localStorage）來實現相同的目的。 注意：僅存儲不敏感的數據。 切勿將其用於敏感數據。

參考： https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

使用 sessionStorage 的示例： https://codepen.io/kishin-karra/pen/zYvgQZZ?editors=1010

示例代碼：

var savedPost = sessionStorage.getItem('text');
document.getElementById("printhere").innerHTML = savedPost;
document.getElementById("userInput").value = savedPost;
function display() {
    var post = document.getElementById("userInput").value;
    document.getElementById("printhere").innerHTML = post;
    sessionStorage.setItem('text', post);
}

輸入文字，點擊發布並刷新

Answer 2

好吧，理想情況下，這個值應該通過 API 來自服務器。 但是，如果您熱衷於使用 JavaScript，您可以考慮localstorage

var post = document.getElementById("userInput").value;
localStorage.setItem("post", post);

document.getElementById("printhere").innerHTML = post || localStorage.getItem("post");

Answer 3

<p id="printhere"></p>
<TEXTAREA Name="content" ROWS="5" COLS="20" id="userInput"></TEXTAREA>
<button  onclick="display()">post</button>  


<script>

    function display(){
        var post = document.getElementById("userInput").value;
        localStorage.setItem('userInputValue',post);
    }
    window.addEventListener('load',()=>{
        var savedUserData = localStorage.getItem('userInputValue');
        document.getElementById("printhere").innerHTML = savedUserData;
    });

</script>

編輯多個輸入：

<p id="printhere"></p>
<TEXTAREA Name="content" ROWS="5" COLS="20" id="userInput"></TEXTAREA>
<button  onclick="display()">post</button>  


<script>

    var num = 0;
    function display(){
        var post = document.getElementById("userInput").value;
        localStorage.setItem(num,post);
        var savedUserData = localStorage.getItem(num);
        document.getElementById("printhere").innerHTML += savedUserData+'<br>';
        num++;
    }

    window.addEventListener('load',()=>{
        if (localStorage.length !== null) {
            for(var i = 0; i < localStorage.length; i++){
                var savedUserData = localStorage.getItem(i);
                document.getElementById("printhere").innerHTML += savedUserData+'<br>';
            }
        }

    });

</script>

Answer 4

我認為您可以像這樣使用preventDefault ：

function display(event){
event.preventDefault()

var post = document.getElementById("userInput").value;
document.getElementById("printhere").innerHTML = post;
}

使用 JavaScript，如何在頁面重新加載后保持用戶輸入？

問題描述

4 個解決方案

解決方案1
0 2020-05-31 15:39:59

解決方案2
0 2020-05-31 15:50:16

解決方案3
0 已采納 2020-05-31 16:19:02

編輯多個輸入：

解決方案4
-1 2020-05-31 15:58:12

使用 JavaScript，如何在頁面重新加載后保持用戶輸入？

問題描述

4 個解決方案

解決方案1 0 2020-05-31 15:39:59

解決方案2 0 2020-05-31 15:50:16

解決方案3 0 已采納 2020-05-31 16:19:02

編輯多個輸入：

解決方案4 -1 2020-05-31 15:58:12

解決方案1
0 2020-05-31 15:39:59

解決方案2
0 2020-05-31 15:50:16

解決方案3
0 已采納 2020-05-31 16:19:02

解決方案4
-1 2020-05-31 15:58:12