Таким образом, мне нужно создать сценарий, который будет принимать рейтинг пользователя (от 1 до 10), вычислять средний рейтинг по всем введенным рейтингам, отображать его на странице и, наконец, сделать его постоянным в локальном хранилище браузера. .
На данный момент у меня большая часть работы. За один сеанс я могу ввести столько голосов, сколько захочу, и на странице будет отображаться средний рейтинг, и он сохраняется даже между обновлениями, поскольку я храню все необходимые данные (последний рейтинг, сумма всех оценок, количество оценок и среднее значение). rating) в объекте и отправьте его в localStorage браузера. Однако, если я введу рейтинг после обновления, предыдущий объект будет перезаписан в localStorage.
Мой вопрос: как мне сохранить все указанные значения в localStorage и иметь возможность добавлять новые рейтинги к этому объекту, не перезаписывая его?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste Formulário</title>
<script>
onload = () => {
let valNota=0,valNotaTotal=0,contClicks=1,valNotaMedia=0,doMedia;
let notaFinal=document.getElementById("notaMedia"); // this will tag the HTML element to which the average will be displayed once calculated
let showNota;
if(localStorage.getItem('notaAtual'))
{
showNota = JSON.parse(localStorage.getItem('notaAtual'));
notaFinal.innerHTML=showNota.notaMedia.toFixed(1);
}// this will check if there is a value for the average within the localStorage object, then display it on the appropriate HTML element.
btnSub.onclick = () => {
doMedia=1;
if (nota1.checked == true)
valNota=+nota1.value;
else if (nota2.checked == true)
valNota=+nota2.value;
else if (nota3.checked == true)
valNota=+nota3.value;
else if (nota4.checked == true)
valNota=+nota4.value;
else if (nota5.checked == true)
valNota=+nota5.value;
else if (nota6.checked == true)
valNota=+nota6.value;
else if (nota7.checked == true)
valNota=+nota7.value;
else if (nota8.checked == true)
valNota=+nota8.value;
else if (nota9.checked == true)
valNota=+nota9.value;
else if (nota10.checked == true)
valNota=+nota10.value;
else
{
doMedia=0;
} // this whole block checks for what value the rating was when the button was pressed
if (doMedia==1) // will check if there was a rating selected when the button was pressed
{
let notaData =
{
nota: valNota, // current rating
notaTotal: valNotaTotal+=valNota, // total ratings (for avg calculation)
qtdNotas: contClicks++, // ammount of ratings
notaMedia: valNotaMedia=valNotaTotal/(contClicks-1) // average ratings
} // creates the object with all important variables. I am aware that the problem lays within this attribution, since it will start from 0 when I refresh the page, thus sending a brand new object to localStorage.
localStorage.setItem('notaAtual',JSON.stringify(notaData)); // stringifies notaData for storaging
showNota = JSON.parse(localStorage.getItem('notaAtual'));
notaFinal.innerHTML=showNota.notaMedia.toFixed(1); // updates average within the HTML element
}
}
}
</script>
</head>
<body>
<div style="background:cyan;width:500px;padding:20px;">
<p>
Nota:
<input type="radio" id="nota1" name="nota" value="1" />
<label for="nota1">1</label>
<input type="radio" id="nota2" name="nota" value="2" />
<label for="nota2">2</label>
<input type="radio" id="nota3" name="nota" value="3" />
<label for="nota3">3</label>
<input type="radio" id="nota4" name="nota" value="4" />
<label for="nota4">4</label>
<input type="radio" id="nota5" name="nota" value="5" />
<label for="nota5">5</label>
<input type="radio" id="nota6" name="nota" value="6" />
<label for="nota6">6</label>
<input type="radio" id="nota7" name="nota" value="7" />
<label for="nota7">7</label>
<input type="radio" id="nota8" name="nota" value="8" />
<label for="nota8">8</label>
<input type="radio" id="nota9" name="nota" value="9" />
<label for="nota9">9</label>
<input type="radio" id="nota10" name="nota" value="10" />
<label for="nota10">10</label>
</p>
<p>
<button type="submit" id="btnSub">Enviar</button>
</p>
</div>
<div style="background:coral;padding:20px;width:500px">
<p>
Nota Média: <span id="notaMedia"></span>
</p>
</div>
</body>
</html>