如何仅在组件初始加载时删除本地存储值

Question

我遇到的情况是，我在本地存储中存储了一些值。我想在页面第一次加载时清除这些值。但是，在那之后，如果我想再次设置这些值，我应该能够做到这一点，并且页面刷新也不应该删除它。所以。问题是：是否有任何方法可以仅在组件的初始加载时执行某些操作，然后不执行任何操作。

Answer 1

您可以创建一个

count

变量，当

react

应用程序首次运行时

useEffect

将从

localstorage

中删除所需的项目，并将本地存储中的

count

设置为

1

，然后每次

component

重新设置-渲染如果计数为 1，它将签入

localstorage

如果计数为 1，则不会从

localstorage

中删除项目。

useEffect(() => {
  if(localStorage.getItem('count') !== '1') {
    localStorage.removeItem('val')
    localStorage.setItem('count', '1')
  }
  set()
}, [])

const set = () => {
  localStorage.setItem('val', 'skndkj')
}

Answer 2

是的，这就是

sessionStorage

的典型用法。其工作原理与

localStroage

相同，但用户关闭浏览器后就会清晰。但是，在页面重新加载之间，它会被保留。

你可以这样使用它：

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
const data = sessionStorage.getItem('key');

Answer 3

您可以通过添加日期作为数据的额外值来实现这一点。然后，只需检查日期是否是当前日期。如果不是当前日期，它将清除您的本地存储。