博客

在一个页面，通过

localStorage

存储指定 key ，并通过 key 的 value 判断不同的状态。

具体如下：

localStorage 相较于 sessionStorage 的优点在于， localStorage 的数据会长期存储，即当页面会话结束（页面关闭）时，数据也会保留，而 sessionStorage 会被删除。 localStorage 主要有以下几种方法：

setItem(va, data)   // 增加
getItem(va)         // 获取
removeItem(va)      // 删除
clear()             // 移除所有

1 定义页面 key 值和对应的 value 值

// key值自定义，无特殊要求，只作为判断的依据
const key = YOUR_PAGE_NAME

// 这里写入的key值为当日时间，可以确保第二天时依然能够进行首次判定
const dayDate = new Date().toDateString()

2 通过

getItem

获取 key 值

获取 key 的 value ，判断是否为当日首次

// 获取key值，不为 dayDate 时，即表示当日首次打开本页
const isFirstOpen = localStorage.getItem(key) !== dayDate

3 通过

setItem

存储指定 key 值为 value

进入新的一天， dayDate 改变，与key比较结果为 false ，表示新的一天首次打开本页；紧随其后，重新给key赋值 dayDate ，确保这天再次打开本页时， key 的 value 与 dayDate 一致

// 在本地存储中写入key值为value
localStorage.setItem(key, dayDate)

示例

const dayDate = new Date().toDateString() // 获取当日信息 Wed Jul 20 2022
const NOW_DATE = 'NOW_DATE' // localStorage中用作存取的标识
...
useEffect(() => {
	if (localStorage.getItem(NOW_DATE) === dayDate) { // 当天
		... // 表示当天已经打开过本页面，dosomething
		return
	}
	// 不在同一天，也就是新的一天第一次打开本页面
	localStorage.setItem(NOW_DATE, dayDate)
	... // 表示当天第一次打开本页面，dosomething
}, [])