Сохранение измененного текста при перезагрузке страницы на какое-то время по истечению которого текст становится изначальным
Сохранение текста в текстовом поле после перезагрузки страницы, при этом текст меняется рандомно при нажатии на кнопку. Также необходимо, чтобы текст через какое-то время менялся на свой изначальный
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="2.css">
<title>111</title>
</head>
<body>
<div id = "dv">
<div id = "qq">
<p id = "pp">Изначальный текст</p>
</div>
<button id = "btn" >Click me!</button>
</div>
<!--1111111111111111111111111111111111111111111111111111111111111111-->
<script type="text/javascript">
$('#btn').on('click', function() {
$(this).prop('disabled', true);
setTimeout(function() {
$(this).prop('disabled', false);
}.bind(this), 3000);
//console.log("GO")
});
</script>
<!--1111111111111111111111111111111111111111111111111111111111111111-->
<script type="text/javascript">
$('#btn').on('click', function(){
var ans
function aa(){
let popUpWindow = document.querySelector('#pp');
const showQuote = el => {
let txt = [
'Рандом1',
'Рандом2',
'Рандом3',
'Рандом4',
'Рандом5',
'Рандом6',
'Рандом7',
'Рандом8',
'Рандом9',
'Рандом10',
'Рандом11',
'Рандом12'
];
el.innerText = ans = txt[Math.floor(Math.random() * txt.length)];
console.log(ans)
}
document.getElementById('pp').style.display = "block"
let timerID = setTimeout(() => showQuote(popUpWindow), 1);
//let timerID1 = setTimeout(() => q1(), 7000);
//let removeID = setTimeout(() => document.getElementById('pp').style.display = "none", 3 * 1000);
//let removeID = setTimeout(() => document.getElementById('pp').textContent="Изначальный текст", 3 * 1000);
}
document.getElementById('pp').innerHTML = aa()
//
//document.getElementById('pp').textContent=ans
localStorage.setItem('pp', document.getElementById('pp').textContent=ans);
});
</script>
</body>
</html>