JSFiddle - React, Tailwind, and code Playground
HTML
<form action="">
<label for="txtUser">Username:</label><input type="text" name="txtUser" id="txtUser">
<br>
<label for="txtPass">Password: </label><input type="password" name="txtPass" id="txtPass">
<br>
Remember Me ?
<br>
<input type="checkbox" name="chkRemember" id="chkremember">
<br>
<input type="button" value="submit" id="btnSubmit" >
</form>
<br>
<p id="result"></p>
JavaScript
document.getElementById("btnSubmit").onclick = function(){
let username = document.getElementById("txtUser").value;
let password = document.getElementById("txtPass").value;
let remember = document.getElementById("chkremember").checked;
var json = {
username : username,
password : password,
remember : remember
}
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("json", JSON.stringify(json));
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("json");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
}//end remember
onload = (() => {
console.log("nigga");
if (typeof(Storage) !== "undefined") {
// Store
let data = localStorage.getItem("json") != null ? JSON.parse(localStorage.getItem("json")) : "remember was not checked" ;
if(data.remember != undefined && data.remember){
document.getElementById("txtUser").value = data.username;
document.getElementById("txtPass").value = data.password;
document.getElementById("chkremember").checked = data.remember;
}else{
document.getElementById("result").innerHTML = localStorage.getItem("json");
}
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
})
()