In my html5 page, I am saving user input values to localstorage from textbox using following code :
localStorage.setItem("Username",uname);
localStorage.setItem("Password",password);
This is working fine and I am able to save data to local storage.Now I want to get data from localstorage and then display in textbox. I know how to get data, I've to use
localStorage.getItem("Username");
But I want to display this username to textbox on pageLoad. Can anybody help me how to do this..??
In my html5 page, I am saving user input values to localstorage from textbox using following code :
localStorage.setItem("Username",uname);
localStorage.setItem("Password",password);
This is working fine and I am able to save data to local storage.Now I want to get data from localstorage and then display in textbox. I know how to get data, I've to use
localStorage.getItem("Username");
But I want to display this username to textbox on pageLoad. Can anybody help me how to do this..??
Share Improve this question edited Dec 3, 2014 at 11:53 Ruchir asked Dec 3, 2014 at 11:15 RuchirRuchir 1,1224 gold badges25 silver badges48 bronze badges 1- For security reasons, I'd be very careful about storing a user's password unencrypted in Local Storage. Username is probably fine, but password seems extremely risky. It'd be especially bad if the site is being served over HTTP rather than HTTPS because the password could be stolen by a MITM injecting extra JS into the page. – Tom Morris Commented Jan 5, 2017 at 8:42
2 Answers
Reset to default 4Try This :-
$('#Usertextboxid').val(localStorage.getItem("Username"));
$('#Passtextboxid').val(localStorage.getItem("Password"));
Instead of Usertextboxid,Passtextboxid selector id's give the id's you are using in you page.
Pure JavaScript example for username input.
Onclick event is handled.
document.getElementById("save").addEventListener("click", save, false);
document.getElementById("restore").addEventListener("click", restore, false);
function save() {
localStorage.setItem("username", document.getElementById('username').value);
}
function restore() {
document.getElementById('username').value = localStorage.getItem("username");
}
Where ids should be set to actual values:
<input id="username" type="text"></input>
<input id="save" type="button" value="save"></input>
<input id="restore" type="button" value="restore"></input>
Onload event is handled.
<!DOCTYPE html>
<html>
<head>
<script>
function startup() {
//
// Initialize local storage
//
localStorage.setItem("username", "Hello, world!");
//
// Get preinitialized value from local storage
//
document.getElementById('username').value = localStorage.getItem("username");
}
</script>
</head>
<body onload="startup();">
<input id="username" type="text"></input>
</body>
</html>