I am trying to store the results into localstorage using strictly javascript, the main goal is to pick a date, pick a time and save the results to localstorage when pressing the button so that I can later use the values, what I am finding a problem with is the fact that the local storage gets reloaded and replaced by the newest value instead of getting updated and showing a list of previous inputs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Performax Cinema</title>
</head>
<body>
<input type="date" id="date" required/>
<select id="time" class="form-control" required>
<option value="0">10:00 AM - 12:00 PM</option>
<option value="1">12:00 AM - 14:00 PM</option>
<option value="2">14:00 AM - 16:00 PM</option>
<option value="3">16:00 AM - 18:00 PM</option>
<option value="4">18:00 AM - 20:00 PM</option>
<option value="5">20:00 AM - 22:00 PM</option>
</select>`enter code here`
<button id="btn" onclick="store()">add</button>
<script src="main.js"></script>
</body>
</html>
function store() {
var time = document.querySelector("option").innerText;
localStorage.setItem("value", JSON.stringify(time));
console.log(localStorage.getItem("value"));
var date = document.querySelector("input").value;
localStorage.setItem("value", date);
console.log(localStorage.getItem("value"));
}
You can only set localStorage once. If you set item twice it will overwrite the previous one. You can set both in the local storage and then storage it in an object, then iterate through the object however you like.
function store() {
var time = document.querySelector("option").innerText;
var date = document.querySelector("input").value;
localStorage.setItem(JSON.stringify(time), date);
console.log(localStorage);
//store in object
const items = { ...localStorage};
console.log(Object.entries(items))
}