时间戳

首页 > 解决方案 > 如何在按钮单击时清除 localStorage

javascript - 如何在按钮单击时清除 localStorage

问题描述

我遵循了 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>

标签： javascriptfunctionlocal-storage

解决方案

在浏览器中检查您的本地存储。您的代码实际上确实清除了 localStorage。您缺少的是更新您的用户界面。将您的 Button 清除代码替换为：

btnClear.onclick = function () {
   localStorage.clear();
   if(localStorage.length === 0)
      lsOutput.innerHTML = "";
};

这是一个教程，例如如何在 chrome 中检查本地存储：How to view or edit localStorage

推荐阅读