Menu
I am making a form where users can input their data. I'd like for this date to be saved by use of local storage. But when i refresh the page only height and weight are still remembered. And i have been quite stuck on trying to make gender , sportivity and birthdate be remembered as well.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
$(document).ready(function() {
$(window).unload(saveSettings);
loadSettings();
});
function loadSettings() {
$('#height').val(localStorage.height);
$('#weight').val(localStorage.weight);
$('#dateOfBirth').val(localStorage.dateOfBirth);
$('input[type=radio]:checked').val(localStorage.gender);
$("#sportive").find("option[value=" + localStorage.sportive + "]").attr("selected", "selected");
}
function saveSettings() {
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
var sportive = document.getElementById("sportive").value;
var gender = $('input[type=radio]:checked').val();
var dateOfBirth = document.getElementById("dateOfBirth").val();
localStorage.height = height;
localStorage.weight = weight;
localStorage.dateOfBirth = dateOfBirth;
localStorage.sportive = sportive;
localStorage.gender = gender;
}
</script>
</head>
<body>
<div data-role="content">
<form id="myForm" >
gender:
<input id="man" type="radio" name="gender" value="Man" >
<label for="man">Man</label>
<input id="vrouw" type="radio" name="gender" value="Vrouw">
<label for="vrouw" >Vrouw</label>
dateOfBirth:
<input type="date" id="dateOfBirth" name="datum" required />
weight (in kg):
<input type="number" id="weight" name="weight" required />
height (in cm):
<input type="number" id="height" name="height" required />
Hoeveel keer doe je aan sport per week?
<select id="sportive" name="sport">
<option value="1.2" >Weinig of geen training, kantoorwerk</option>
<option value="1.375">Lichte training/sport 1-3 dagen per week</option>
<option value="1.55" >Gemiddelde training/sport 3-5 dagen per week</option>
<option value="1.725" >Zware training/sport 6-7 dagen per week</option>
<option value="1.9" >Zware dagelijkse training/sport plus lichamelijk werk</option>
</select>
<br />
</form>
</div>
</body>
greetings
825
To store the form data in JavaScript localStorage, we'll use the setItem() method. It stores the data in the localStorage object and takes the key and value parameters as input. The parameters can be later used to retrieve the data when the browser reloads the page or a new session is initiated.
localStorage demo The data does not expire. It remains after the browser restart and even OS reboot.
You can read data from localStorage using the getItem() method. This method accepts the key as a parameter and returns the value as a string. If you want to convert the result from a string to an object, you should use the JSON. parse() method.
Making changes to elements stored in the local storage don't trigger it. In order to make it work, invoke appropriate event after changes to the local storage were made. Then, to refresh an functional component whenever a new storage event is invoked, I highly recommend using the useEffect hook.
You are complicating your script. Try this. Working JSFIDDLE
If you are using jQuery once, do not mix it with pure javascript, like document.getElementById(). And do not create a height variable to store the $('#height').val(), you can use this directly. Code is more readable.
$(document).ready(function() {
$(window).unload(saveSettings);
loadSettings();
});
function loadSettings() {
$('#height').val(localStorage.height);
$('#weight').val(localStorage.weight);
$('#dateOfBirth').val(localStorage.dateOfBirth);
$('input[value="' + localStorage.gender + '"]').prop('checked', true);
$("#sportive").val(localStorage.sportive);
}
function saveSettings() {
localStorage.height = $('#height').val();
localStorage.weight = $('#weight').val();
localStorage.dateOfBirth = $('#dateOfBirth').val();
localStorage.sportive = $("#sportive").val();
localStorage.gender = $('input[type=radio]:checked').val();
}
Update: If you are using jQuery 3, unload will throw an error. You should use this instead:
$(window).on('unload', function(){
saveSettings();
loadSettings();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
