我遵循了 Youtube 上關于 localStorage 的教程，一切順利。在那之后，我試圖弄亂這些概念，并想添加一個按鈕來洗掉 localStorage (id ="btnClear")。
現在我已經嘗試了一切，但它不允許我洗掉存盤。我認為這是因為我在函式內部宣告了常量，我可能不得不將它們存盤在外面的某個地方并對輸入進行字串化。但是，即使在這種情況下，我也可以以某種方式清除 localStorage 嗎？
<body>
<content>
<fieldset>
<legend>Insert Data</legend>
<input type="text" id="inpKey" placeholder="Insert Key.." />
<input type="text" id="inpValue" placeholder="Insert Value.." />
<button type="button" id="btnInsert">Insert</button>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="lsOutput"></div>
<br />
<button type="button" id="btnClear">Clear</button>
</fieldset>
</content>
</body>
<script type="text/javascript">
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutput = document.getElementById("lsOutput");
const btnClear = document.getElementById("btnClear");
btnInsert.onclick = function () {
const key = inpKey.value;
const value = inpValue.value;
if (key && value) {
localStorage.setItem(key, value);
location.reload();
}
};
for (let i = 0; i < localStorage.length; i ) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
lsOutput.innerHTML = `${key}: ${value}`;
}
//BUTTON CLEAR
btnClear.onclick = function () {
localStorage.clear();
};
</script>
uj5u.com熱心網友回復：
在瀏覽器中檢查您的本地存盤。您的代碼實際上確實清除了 localStorage。您缺少的是更新您的用戶界面。將您的 Button 清除代碼替換為：
btnClear.onclick = function () {
localStorage.clear();
if(localStorage.length === 0)
lsOutput.innerHTML = "";
};
這是一個如何在 chrome 中檢查本地存盤的教程，例如：如何查看或編輯 localStorage
uj5u.com熱心網友回復：
看看這里，我已經將您所有的代碼從 HTML 更新為 JS。
你可以在 jsfiddle 上測驗它，因為 stackoverflow 會拋出這個錯誤：
{
"message": "Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.",
"filename": "https://stacksnippets.net/js",
"lineno": 37,
"colno": 33
}
此外，最好document.addEventListener與您的大多數事件一起使用（因為它們為您提供到達者體驗）
在此處查看有關事件的更多資訊 來自此 URL 的參考：
行內事件的顯著缺點是與上述事件偵聽器不同，您可能只分配了一個行內事件。行內事件存盤為元素[doc]的屬性/屬性，這意味著它可以被覆寫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to clear localStorage on button click</title>
</head>
<body>
<content>
<fieldset>
<legend>Insert Data</legend>
<input type="text" id="inpKey" placeholder="Insert Key.." />
<input type="text" id="inpValue" placeholder="Insert Value.." />
<button type="button" id="btnInsert">Insert</button>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<ul id="outputList"></ul>
<br />
<button type="button" id="btnClear">Clear</button>
</fieldset>
</content>
<script type="text/javascript">
const printLSContent = function (el) {
for (let i = 0; i < localStorage.length; i ) {
let key = localStorage.key(i);
let value = localStorage.getItem(key);
let li = document.createElement('li');
li.innerHTML = `K: ${key}; V: ${value}`;
el.appendChild(li);
}
}
document.addEventListener("DOMContentLoaded", function (event) {
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const outputList = document.getElementById("outputList");
const btnClear = document.getElementById("btnClear");
// element.addEventListener(event, handler[, options]); // type - event type; listener - event handler; options -
btnInsert.addEventListener('click', function () {
const key = inpKey.value;
const value = inpValue.value;
localStorage.setItem(key, value);
location.reload();
}, false);
printLSContent(outputList);
// //BUTTON CLEAR
btnClear.addEventListener('click', function () {
localStorage.clear();
location.reload();
}, false);
});
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/350621.html
標籤：javascript 功能 本地存储