Retaining the Textbox Values Even After Refresh

Retaining the textbox values even after refresh

Oh yea!! You can use localStorage or sessionStorage of HTML5.

sessionStorage will keep it until a session is alive but
localStorage will keep it until you delete it manually.

See below for ways you can store it in either of them:

To Store:

localStorage.setItem('somekey','textboxValue') 
//or 
sessionStorage.setItem('somekey','textboxvalue')

To Retrieve

localStorage.getItem('somekey')
//or
sessionStorage.getItem('somekey');

Retaining the textbox value after Page refresh in PHP

Example 1

<?php
session_start();
if (isset($_POST['submit'])) {
    $_SESSION['test'] = $_POST['test'];
}
?>    
<form method="post" action="">
    <input type="text" value="<?php echo isset($_SESSION['test']) ? $_SESSION['test'] : ''; ?>" name="test" />
    <input type="submit" value="submit" name="submit" />
</form>

Example 2

<form method="post" action="">
    <input type="text" value="<?php echo isset($_POST['test']) ? $_POST['test'] : ''; ?>" name="test" />
    <input type="submit" value="submit" name="submit" />
</form>

how to keep values in textbox even after refreshing the same page in html?

You have to get the value in COOKIE

Use button Instead submit, something like this:

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
    return null;
}


    $("document").ready(function(){
      document.getElementById('dateTextBoxValue').value=readCookie("dateValue");
      $(".submit").click(function(event){
         var dateValueText=document.getElementById('dateTextBoxValue').value;
         document.cookie = "dateValue="+dateValueText;
      });

    });

Retain textbox values on page refresh

I was able to refresh the page without clearing the value in textbox. I did it as below:
I created a public property in the UC1.vb as below:
Public Property textbox_value() As String

    Get
        If Session("textbox1") IsNot Nothing Then
            Return Session("textbox1").ToString()
        Else
            Return ""
        End If
    End Get
    Set(value As String)
        Session("textbox1") = value
    End Set
End Property

And in the page_load event of the user control i added the code below:
If IsPostBack Then
textbox_value= textbox1.Text
ElseIf Not IsPostBack Then ' First time the page is loaded or when the page is refreshed
textbox1.Text = textbox_value
End If

Hope it helps.

Keep input value after refresh page

EDIT: Keep value of more inputs

HTML:

<input type="text" id="txt_1" onkeyup='saveValue(this);'/> 
<input type="text" id="txt_2" onkeyup='saveValue(this);'/> 

Javascript:

<script type="text/javascript">
        document.getElementById("txt_1").value = getSavedValue("txt_1");    // set the value to this input
        document.getElementById("txt_2").value = getSavedValue("txt_2");   // set the value to this input
        /* Here you can add more inputs to set value. if it's saved */

        //Save the value function - save it to localStorage as (ID, VALUE)
        function saveValue(e){
            var id = e.id;  // get the sender's id to save it . 
            var val = e.value; // get the value. 
            localStorage.setItem(id, val);// Every time user writing something, the localStorage's value will override . 
        }

        //get the saved value function - return the value of "v" from localStorage. 
        function getSavedValue  (v){
            if (!localStorage.getItem(v)) {
                return "";// You can change this to your defualt value. 
            }
            return localStorage.getItem(v);
        }
</script>

React retains the input value after the page is refreshed and keeps it in local storage

First you want to store your input's value in react state

const [value, setValue] = useState("");

When the input changes, write the change to react state, and also localStorage

const handleChange = (e) => {
  setValue(e.target.value);
  localStorage.setItem("inputValue", e.target.value);
};

When the component is mounted, we want to set the initial state of the input to the value in localStorage

useEffect(() => {
  setValue(localStorage.getItem("inputValue"));
}, []);

Finally, hook the handler to onChange, and use the React state as the form value

<input
  value={value}
  onChange={handleChange}
/>

See: https://codesandbox.io/s/react-input-not-reload-after-refreshing-forked-q84r8?file=/demo.js

---

Related Topics