如何实现点击按钮清空localStorage，现有代码不生效该如何解决？

问题根因 #

你的localStorage.clear()语法本身没有问题，之所以看起来清空失败，是因为点击清空按钮后没有同步更新页面内容：页面上展示的存储数据是页面加载时提前渲染好的旧内容，此时localStorage实际已经被清空，手动刷新页面就能看到存储内容消失。

你之前猜测的「常量声明位置不对、需要对内容做stringify处理」都不是本次问题的诱因：

• 当前你存储的是输入框的字符串类型值，不需要额外做JSON.stringify序列化，只有存储对象、数组等非字符串类型数据时才需要序列化操作
• 常量的声明位置也不会影响localStorage.clear()的执行效果

修复方案 #

你可以二选一即可：

方案1：添加页面刷新逻辑

和插入数据的逻辑保持一致，清空存储后重载页面重新渲染内容，只需修改清空按钮的点击事件：

btnClear.onclick = function () {
  localStorage.clear();
  location.reload(); // 新增此行即可
};

方案2：无刷新更新页面（体验更流畅）

不需要重载页面，清空存储后直接清空存储内容的展示区域：

btnClear.onclick = function () {
  localStorage.clear();
  lsOutput.innerHTML = ''; // 直接清空展示节点的内容
};

内容的提问来源于stack exchange，提问作者youngmago