In this reduced version of my code for easier visualization, I come across the following doubt:
I write something in the input and then click on "Clear form" which calls the "resetForm" function.
Besides clearing the inputs, it also clears the sessionStorage where the data saved in real time by the "autosave" function is stored. However, without reloading the page;
When I change the option in the select, the deleted values from the input reappear.
When I check the session in "roleOptions", even after it resulted in null in "resetForm", it exists again.
I want to understand why this is happening. I tried to delete the specific session with sessionStorage.removeItem("fields_entity") and it didn't work either. In fact, I managed to make the code work normally, but I would like to understand the behavior that occurs in this case.
Below the whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<form class="form user">
<label for="role">Choose your role</label>
<select id="role" name="role">
<option value="teacher" name="teacher">Teacher</option>
<option value="student" name="student">Student</option>
<option value="adm" name="adm">Collaborator</option>
</select>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="button" onclick="resetForm();"> Clear formulary</button>
</form>
<script>
function autosave(form, id) {
let fields = sessionStorage.getItem(`fields_${id}`);
fields ? (fields = JSON.parse(fields)) : (fields = {});
Array.from(form.elements).forEach(input => {
if (input.tagName === "INPUT" || input.tagName === "SELECT") {
input.addEventListener("input", () => {
fields[input.name] = input.value;
sessionStorage.setItem(`fields_${id}`, JSON.stringify(fields));
});
}
});
Object.keys(fields).forEach(key => {
const input = document.querySelector(`input[name="${key}"], select[name="${key}"]`);
if (input) {
input.value = fields[key];
}
});
}
const form = document.querySelector(".form.user");
const role = document.querySelector("#role");
function roleOptions() {
console.log(sessionStorage.getItem("fields_entity")) // session still existing
autosave(form, "entity");
let roleValue = role.value;
switch (roleValue) {
case "student":
studentFormulary();
break;
case "teacher":
teacherFormulary();
break;
case "adm":
admFormulary();
break;
default:
studentFormulary();
break;
}
};
role.addEventListener("change", roleOptions);
function resetForm() {
form.querySelectorAll("input").forEach(e => { e.value = ""; });
sessionStorage.clear();
console.log(sessionStorage.getItem("fields_entity")) // null
}
function studentFormulary() {
}
function teacherFormulary() {
}
function admFormulary() {
}
roleOptions();
</script>
</body>
</html>
The autosave function takes a form and an id as parameters, where the id corresponds to the name of the session that will be created to store the data in real time. All input and select elements of the form have the input event added to them, which stores the values in the fields array. This array will be empty if the session with that name does not exist, and it will be an array of objects with the previously saved values if it exists.
function autosave(form, id) {
let fields = sessionStorage.getItem(`fields_${id}`);
fields ? (fields = JSON.parse(fields)) : (fields = {});
Array.from(form.elements).forEach(input => {
if (input.tagName === "INPUT" || input.tagName === "SELECT") {
input.addEventListener("input", () => {
fields[input.name] = input.value;
sessionStorage.setItem(`fields_${id}`, JSON.stringify(fields));
});
}
});
Object.keys(fields).forEach(key => {
const input = document.querySelector(`input[name="${key}"], select[name="${key}"]`);
if (input) {
input.value = fields[key];
}
});
}