How do I implement the storage property in this code snippet? The current code is not functioning correctly and resets after each page refresh.
Please review my code at the following link: https://jsfiddle.net/74qxgonh/
let values = [];
// Accessing Form Element (add text)
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
// Creating an object with a unique id
storageValue = {
id: "num" + Math.floor(Math.random() * (1000, 9000)),
text: e.target.elements.textInput.value,
};
// Adding the object to array for saving to localStorage
values.push({ storageValue });
localStorage.setItem("values", JSON.stringify(values));
// Creating Tags dynamically
let input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("class", "chk-box");
input.setAttribute("id", `${storageValue.id}`);
let label = document.createElement("label");
label.textContent = `${storageValue.text}`;
label.setAttribute("for", `${storageValue.id}`);
label.setAttribute("class", "chk-label");
const btnDeleted = document.createElement("button");
btnDeleted.setAttribute("class", "btn-delete");
btnDeleted.textContent = "X";
btnDeleted.addEventListener("click", () => {
div.remove();
});
const div = document.createElement("div");
div.setAttribute("class", "inputGroup");
div.appendChild(input);
div.appendChild(label);
div.appendChild(btnDeleted);
document.querySelector(".container-center").appendChild(div);
e.target.elements.textInput.value = "";
});