Хранение данных в кеше
Всем привет, написал небольшой код голосования:
<style> #quiz { width: 200px; height: 200px; border: 1px solid black; } .result1, .result2, .result3, .result4 { display: none; position: relative; color: #216558; } #quiz > #answer1:checked + .span_result1 > .result1 { display: block; bottom: -120px; } #quiz > #answer2:checked + .span_result2 > .result2 { display: block; bottom: -100px; } #quiz > #answer3:checked + .span_result3 > .result3 { display: block; bottom: -80px; } #quiz > #answer4:checked + .span_result4 > .result4 { display: block; bottom: -60px; } </style> <form id="quiz"> <b><i>Как вы произносите название "JavaScript"?</i></b><br> <input type="radio" name="quiz" id="answer1"><span class="span_result1">ДжаваСкрипт<div class="result1">Вы выбрали "ДжаваСкрипт"</div></span><br> <input type="radio" name="quiz" id="answer2"><span class="span_result2">ЯваСкипт<div class="result2">Вы выбрали "ЯваСкрипт"</div></span><br> <input type="radio" name="quiz" id="answer3"><span class="span_result3">ДжабаСкрипт<div class="result3">Вы выбрали "ДжабаСкрипт"</div></span><br> <input type="radio" name="quiz" id="answer4"><span class="span_result4">ЕваСкрипт<div class="result4">Вы выбрали "ЕваСкрипт"</div></span> </form> Вопрос: как закешировать данные на js так, чтобы при релоаде не сливалось значение radio и нельзя было изменить положение этого самого radio (желательно без БД) P.S.Кто помнит Ева'Скрипт?:lol: |
MOT,
искать по форуму примеры с localStorage и начните писать код. метка есть в localStorage ставим значение, отключаем выбор иначе ставим обработку выбора |
localStorage сохранение выбора
MOT,
<style> #quiz { width: 200px; height: 200px; border: 1px solid black; } .result1, .result2, .result3, .result4 { display: none; position: relative; color: #216558; } #quiz > #answer1:checked + .span_result1 > .result1 { display: block; bottom: -120px; } #quiz > #answer2:checked + .span_result2 > .result2 { display: block; bottom: -100px; } #quiz > #answer3:checked + .span_result3 > .result3 { display: block; bottom: -80px; } #quiz > #answer4:checked + .span_result4 > .result4 { display: block; bottom: -60px; } </style> <form id="quiz"> <b><i>Как вы произносите название "JavaScript"?</i></b><br> <input type="radio" name="quiz" id="answer1"><span class="span_result1">ДжаваСкрипт<div class="result1">Вы выбрали "ДжаваСкрипт"</div></span><br> <input type="radio" name="quiz" id="answer2"><span class="span_result2">ЯваСкипт<div class="result2">Вы выбрали "ЯваСкрипт"</div></span><br> <input type="radio" name="quiz" id="answer3"><span class="span_result3">ДжабаСкрипт<div class="result3">Вы выбрали "ДжабаСкрипт"</div></span><br> <input type="radio" name="quiz" id="answer4"><span class="span_result4">ЕваСкрипт<div class="result4">Вы выбрали "ЕваСкрипт"</div></span> </form> <script> document.addEventListener( "DOMContentLoaded" , function() { let k = localStorage.indexAnswer; const inp = document.querySelectorAll('[name="quiz"]'); const click = (elem, i) => elem.addEventListener("click", event => (localStorage.indexAnswer === void 0) ? (localStorage.indexAnswer = i) : event.preventDefault() ); inp.forEach(click); if(k !== void 0) inp[k].checked = true; }); </script> |
Это скорее опрос, а не голосование, вот только без сервера, это ни то и не другое, это уже индивидуальная памятка или записки склеротика.
|
Часовой пояс GMT +3, время: 00:55. |