Я создал этот проект списка задач, в котором пользователь может добавлять и удалять задачи. Я также добавил функцию сохранения значений списка задач в браузере Local-Storage, поэтому при перезагрузке страницы элементы списка все еще сохраняются на странице. Проблема, с которой я сталкиваюсь, заключается в том, что эта функция работает только во вкладке «Инкогнито» или когда я перезагружаю вкладку «Нормальная». Я думаю, что это какая-то проблема, связанная с кешем .?
Есть ли способ, с помощью которого я могу получить список без каких-либо сложных перезагрузок и без открытия в вкладке инкогнито. *, CSS и JAVASCRIPT код для того же.
*
{
padding:10px;
margin:0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif ;
}
.main-heading
{
text-align: center;
font-size: 5rem;
width:100%;
font-weight:lighter;
color:#00bf8f;
}
#mainList
{
min-height:500px;
width:500px;
margin:3rem auto;
padding:30px;
box-shadow:0px 0px 8px 0px #000;
}
.inputListName
{
margin:1rem auto;
min-width:100%;
}
.inputListName > .addItemHeading
{
text-align:center;
font-size:2rem;
font-weight: lighter;
color:#00bf8f;
}
.inputListName > hr
{
border:1px solid #00bf8f;
width:100px;
padding:0px !important;
margin:1rem auto;
}
.inputListName > input[type="text"]
{
height:45px;
width:65%;
font-size: 1rem;
float:left;
text-align:center;
color:#00bf8f;
font-weight: bolder;
border:1px solid #0b8793;
border-radius:10px;
}
.inputListName > input[type="text"]:focus
{
box-shadow:0px 0px 8px 0px #0009;
}
.inputListName > input[type="submit"]
{
height:45px;
width:30%;
margin-left:10px;
float:left;
border:1px solid #0b8793;
background:white;
color:#0b8793;
border-radius:10px;
font-size: 1rem;
}
.inputListName > input[type="submit"]:hover
{
color:white;
background:#0b8793;
}
#errorMessage
{
color:#c31432;
position: relative;
top:10px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.error-img
{
height:80px;
width:80px;
border-radius: 20px;
}
#listContainer
{
counter-reset: section;
}
#listContainer > li
{
list-style-type: none;
width:100%;
position: relative;
padding:15px;
height:52px;
margin-top:10px;
border:1px solid #00bf8f;
color:#00bf8f;
font-weight: bolder;
}
#listContainer > li::before {
counter-increment: section;
content: counter(section) ": ";
color:#00f260;
}
#listContainer > li >.closeBtn
{
position: absolute;
right:0;
top:0;
color:red;
border:none;
height:50px;
width:40px;
font-weight: bolder;
text-align: center;
background:#00f260;
}
#listContainer > li:hover
{
background:#00bf8f;
color:#fff;
}
footer >h4
{
text-align: center;
background-color: #00bf8f;
color:#fff;
min-height:40px;
}
@media only screen and (max-width:500px)
{
#mainList
{
width:100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<title>My First TODO List.</title>
<link rel="icon" href="app-icon.png"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css"/>
<!--Web app manfest file for android devices-->
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#dd62ff" />
</head>
<body>
<h1 class="main-heading">TODO List</h1>
<div class="list" id="mainList">
<form class="inputListName" name="form-input" accept="index.html" >
<h4 class="addItemHeading">Add Items To The List</h4>
<hr/>
<input type="text" class="inputName" placeholder="Type Task name"/>
<input type="submit" class="submitName" value="Add"/>
<p id="errorMessage"></p>
</form>
<div id="deleteAllListItem"></div>
<ul id="listContainer"></ul>
</div>
<footer>
<h4>This TODO List is Made With ♥ By Vaibhav Kaul</h4>
</footer>
</body>
<script>
//Check if the service worker exists in the navigator object.
if ("serviceWorker" in navigator)
{
window.addEventListener("load", function()
{
navigator.serviceWorker
.register("service-worker.js")
.then(res => console.log("service worker registered"))
.catch(err => console.log("service worker not registered", err))
})
}
</script>
<script src="app.js"></script>
</html>