如何從本地存儲正確檢索數據？
[英]How to correctly retrieve data from local storage?
問題描述
這應該是一個預訂系統。 單擊按鈕時，我的數據在 localStorage 中正確輸入，但是當我重新加載頁面時，UI 更改為默認值，但數據仍在 localStorage 中。 我想我幾乎嘗試了everythink很多教程等等，但仍然失敗。 有沒有辦法在刷新后顯示它們？
var span = document.querySelector('#pocet'); var badge = document.querySelector('#badge').classList.add('badge-success'); var lock = document.querySelector('#lock'); let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []; localStorage.setItem('items', JSON.stringify(itemsArray)); const data = JSON.parse(localStorage.getItem('items')); function rezervacka(){ badge = document.querySelector('#badge'); lock = document.querySelector('#lock'); span = document.querySelector('#pocet'); var currentVal = Number(pocet.textContent.split('/')[0]); if(currentVal < 7) { pocet.textContent = (currentVal + 1) + '/' + 7; console.log(pocet); } if(pocet.textContent === '7/7') { badge.classList.add('badge-danger'); lock.classList.add('fa-lock'); lock.classList.remove('fa-unlock'); } itemsArray.push(pocet.textContent); localStorage.setItem('items', JSON.stringify(itemsArray)); };
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <title>Document</title> </head> <body> <table class="table table-striped table-hover"> <caption> Pondelok, 16.12.2019 <br /> </caption> <thead> <tr> <th>Čas</th> <th>Workout</th> <th>Obsadenosť</th> </tr> </thead> </tbody> <tr> <td> 07:00 - 07:50 </td> <td>Powercore Workout s Marcelom</td> <td> <div id="badge" class="badge"> <i id="lock" class="fa fa-unlock"></i> <span id="pocet">0/7</span> </div> <button id="marcel1" onclick="rezervacka(this);">Reserve</button> </td> </tr> <tr> <td> 11:00 - 11:50 </td> <td>Powercore Workout s Marcelom</td> <td> <div class="badge badge-success"> <i class="fa fa-unlock"></i> 1/7 </div> </td> </tr> <tr> <td> 17:00 - 17:50 </td> <td>Powercore Workout so Samom</td> <td> <div class="badge badge-success"> <i class="fa fa-unlock"></i> 2/7 </div> </td> </tr> <tr> <td> 18:00 - 18:50 </td> <td>Powercore Workout so Samom Level 1 Zaciatocnici</td> <td> <div class="badge badge-success"> <i class="fa fa-unlock"></i> 3/7 </div> </td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <script src="app.js"></script> </body> </html>
1 個解決方案
解決方案1
2 已采納 2019-12-16 01:09:37
為什么人們評論但不給你任何代碼？ 顯然，您實際上已經付出了一些真正的努力，但只是碰壁了。 無論如何，您的變量pocet從未真正定義過。 我認為您調用了變量span ，這就是您要引用的意思，所以我為您更改了它。 然后，我添加了這段代碼：
window.addEventListener('load', function (){
if(itemsArray.length > 0){
document.querySelector('#pocet').innerHTML = itemsArray[itemsArray.length - 1];
}
});
它等待頁面加載，然后根據從 localStorage 中獲取的數組更新 pocet 跨度。 我不知道為什么你需要它是一個數組而不是一個單一的值，但我把它留着，以防你真的需要它。 我還從您的rezervacka(this) onclick 調用中刪除了this參數，因為您沒有使用它。 除此之外，我只是做了一些最小的清潔。 如果您有任何問題，請告訴我。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"
integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
<title>Document</title>
<script>
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
localStorage.setItem('items', JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem('items'));
window.addEventListener('load', function (){
if(itemsArray.length > 0){
document.querySelector('#pocet').innerHTML = itemsArray[itemsArray.length - 1];
}
});
function rezervacka(){
badge = document.querySelector('#badge');
lock = document.querySelector('#lock');
span = document.querySelector('#pocet');
var currentVal = Number(span.textContent.split('/')[0]);
if(currentVal < 7) {
span.textContent = (currentVal + 1) + '/' + 7;
console.log(pocet);
}
if(span.textContent === '7/7') {
badge.classList.add('badge-danger');
lock.classList.add('fa-lock');
lock.classList.remove('fa-unlock');
}
itemsArray.push(span.textContent);
localStorage.setItem('items', JSON.stringify(itemsArray));
}
</script>
</head>
<body>
<table class="table table-striped table-hover">
<caption>
Pondelok,
16.12.2019 <br />
</caption>
<thead>
<tr>
<th>Čas</th>
<th>Workout</th>
<th>Obsadenosť</th>
</tr>
</thead>
</tbody>
<tr>
<td>
07:00 -
07:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div id="badge" class="badge"> <i id="lock" class="fa fa-unlock"></i> <span id="pocet">0/7</span>
</div>
<button id="marcel1" onclick="rezervacka();">Reserve</button>
</td>
</tr>
<tr>
<td>
11:00 -
11:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> 1/7
</div>
</td>
</tr>
<tr>
<td>
17:00 -
17:50
</td>
<td>Powercore Workout so Samom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> 2/7
</div>
</td>
</tr>
<tr>
<td>
18:00 -
18:50
</td>
<td>Powercore Workout so Samom Level 1 Zaciatocnici</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> 3/7
</div>
</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
更新：
如果您需要將所有按鈕保存到 localStorage，您可以給每個 pocet 一個 ID，然后將該 ID 傳遞給 rezervacka 函數：
rezervacka(pocetID)
然后，您可以找到具有該 ID 的元素，如下所示：
pocet = document.getElementById(pocetID);
badge = pocet.parentNode;
lock = badge.getElementsByClassName("fa")[0];
然后，當您更新 localStorage 時，請使用對象而不是數組。 那樣更容易。 您可以將 ID 保存為 textContent 值的鍵，如下所示：
itemsObject[pocetID] = pocet.textContent;
localStorage.setItem('items', JSON.stringify(itemsObject));
當然，當您重新加載頁面並獲取保存的 localStorage 數據時，您將從對象中獲取數據，檢查以確保每個 ID 的元素都存在，然后使用保存值更新該元素，例如所以：
window.addEventListener('load', function (){
for(var pocetID in itemsObject){
if(Object.prototype.hasOwnProperty.call(itemsObject, pocetID) && document.getElementById(pocetID)){
document.getElementById(pocetID).innerHTML = itemsObject[pocetID];
}
}
});
這是您的代碼中的所有內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/90e4bc8c6b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css"
integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
<title>Document</title>
<script>
let itemsObject = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : {};
window.addEventListener('load', function (){
for(var pocetID in itemsObject){
if(Object.prototype.hasOwnProperty.call(itemsObject, pocetID) && document.getElementById(pocetID)){
document.getElementById(pocetID).innerHTML = itemsObject[pocetID];
}
}
});
function rezervacka(pocetID){
pocet = document.getElementById(pocetID);
badge = pocet.parentNode;
lock = badge.getElementsByClassName("fa")[0];
var currentVal = Number(pocet.textContent.split('/')[0]);
if(currentVal < 7) {
pocet.textContent = (currentVal + 1) + '/' + 7;
console.log(pocet);
}
if(pocet.textContent === '7/7') {
badge.classList.add('badge-danger');
lock.classList.add('fa-lock');
lock.classList.remove('fa-unlock');
}
itemsObject[pocetID] = pocet.textContent;
localStorage.setItem('items', JSON.stringify(itemsObject));
}
</script>
</head>
<body>
<table class="table table-striped table-hover">
<caption>
Pondelok,
16.12.2019 <br />
</caption>
<thead>
<tr>
<th>Čas</th>
<th>Workout</th>
<th>Obsadenosť</th>
</tr>
</thead>
</tbody>
<tr>
<td>
07:00 -
07:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div class="badge"> <i class="fa fa-unlock"></i> <span class="pocet" id="pocet1">0/7</span>
</div>
<button onclick="rezervacka('pocet1');">Reserve</button>
</td>
</tr>
<tr>
<td>
11:00 -
11:50
</td>
<td>Powercore Workout s Marcelom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> <span class="pocet" id="pocet2">0/7</span>
</div>
<button onclick="rezervacka('pocet2');">Reserve</button>
</td>
</tr>
<tr>
<td>
17:00 -
17:50
</td>
<td>Powercore Workout so Samom</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> <span class="pocet" id="pocet3">0/7</span>
</div>
<button onclick="rezervacka('pocet3');">Reserve</button>
</td>
</tr>
<tr>
<td>
18:00 -
18:50
</td>
<td>Powercore Workout so Samom Level 1 Zaciatocnici</td>
<td>
<div class="badge badge-success"> <i class="fa fa-unlock"></i> <span class="pocet" id="pocet4">0/7</span>
</div>
<button onclick="rezervacka('pocet4');">Reserve</button>
</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"
integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P"
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
如何使用JavaScript從本地存儲中檢索數據？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.