How should I make input permanent and make the input stay even after reloading the page in html?

Question

How should I make input permanent? Like for example, if I type in "Hello world" it should say "hello world " and "hello world" should be there even after reloading

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="content"></p>
    <input type="text" id="userInput">
    <script>
        function getInputFromTextBox() {
    let input = document.getElementById("userInput").value;
document.getElementById("content").innerHTML = input;
     
}



    </script>
 
    <button onclick="getInputFromTextBox()">submit</button>
</body>

</html>

check [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) for a start — lastr2d2, May 25 '21 at 14:49
i am a beginner and idk a lot about web development. How should i use local storage — LTG Slayer, May 25 '21 at 14:51
there is a link in the comment, if you click that you will get an introduction about what it is and how to use it, along with some examples — lastr2d2, May 25 '21 at 14:52
Try to use localStorage, if you get some error update your question — Sfili_81, May 25 '21 at 15:01

score 1 · Answer 1 · answered May 25 '21 at 15:50

You can use localStorage

// JAVASCRIPT

// Getting the value from localStorage
// The "key" here need to be the same defined below on the save() function
const getValue = localStorage.getItem("key");
if (getValue) {
    document.getElementById("inputId").value = getValue;
}

function save() {
    const setValue = document.getElementById("inputId").value;
    // Here you can set 'key' with any name you like
    // Setting the value in localStorage
    localStorage.setItem("key", setValue);
}

<!-- HTML -->
<input type="text" id="inputId" />
<button onclick="save()">save value</button>

score 0 · Answer 2 · answered May 25 '21 at 16:04

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>Type here</h3>
    <input type="text" id="inputText">
    <input type="submit" id="submit">
    <p id="seeHere"></p>
</body>
<script>
    if(localStorage.getItem("info")==null){

    }
    else{
        value();
    }
   
    let submit = document.getElementById("submit");
    submit.addEventListener("click", function () {
        console.log("hello world");
        let inputText = document.getElementById("inputText");
        let inputTextvalue = inputText.value;
        inputText.value="";
        let localValue = localStorage.getItem("info");
        if (localValue == null) {
            arr = [];
        }
        else {
            arr = JSON.parse(localValue);
        }
        arr.push(inputTextvalue);
        localStorage.setItem("info", JSON.stringify(arr));
        value();


    })
    function value() {
        let localValue = localStorage.getItem("info");  
        let seeHere = document.getElementById("seeHere");
        seeHere.innerHTML="";
        let seeHeretext="";
        
        let parsedLocalvalue= JSON.parse(localValue);
        parsedLocalvalue.forEach(element => {
            seeHeretext=seeHeretext+`${element}<br>`;
        });
        seeHere.innerHTML=seeHeretext;

    }
</script>

</html>

This is the required answer for the question see carefully .

You must check it once and try to run this code . Surely it will work ,If any other query is there please share. — , May 25 '21 at 16:08

How should I make input permanent and make the input stay even after reloading the page in html?

2 Answers2