前言

今天，我将带领大家一起使用TypeScript实现一个引人注目的功能：访问历史记录。随着互联网的快速发展，用户对于网页的访问和浏览已成为日常生活中不可或缺的一部分。然而，当我们刷新页面时，原本的浏览历史记录就会消失，给用户带来一定的不便。为了改善用户体验，我们将开发一个功能，使得用户能够在页面刷新后依然保留访问历史记录，轻松回溯之前的浏览轨迹。

数据格式：[ { count: number, time: string } ]

步骤一：封装年|月|日|时|分|秒格式化时间和补0 函数

代码截图如下：

源码如下：

// // 数据格式；
// ;[ { count: number, time: string } ]


// ! #2. 封装月日 时分秒 两位数 补0的函数
// const padZero: (num: number) => String = (num) => {
const padZero = (num: number): String => {
	return num.toString().padStart(2, '0')
}
// ! #1. 封装年月日 时分秒 格式化时间函数
const formatTime = (date?: Date | string): String => {
	// (1) 如果没有传递参数，就是当前时间
	if (!date) date = new Date()
	// (2) 如果传递的是字符串，把字符串转换成日期对象
	if (typeof date === 'string') date = new Date(date)
	let year = date.getFullYear()
	let month = date.getMonth() + 1
	let day = date.getDate()
	let hours = date.getHours()
	let minutes = date.getMinutes()
	let seconds = date.getSeconds()
	// (3) 将年月日时分秒字符串拼接在一起
	return `${year}-${padZero(month)}-${padZero(day)} ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`
}
console.log(formatTime()) //不传参数，返回当前的日期
console.log(formatTime('2023-6-16')) //支持
console.log(formatTime(new Date('2023-6-28'))) //支持对象 当前的年月日，2023-6-28

控制台打印如下：

步骤二：定义数据类型+获取数据的方法

代码截图如下：

源码如下：

// ! #3. 定义数据类型
type List = { count: number; time: string }[]


// ! #4. 获取数据的方法
const KEY: 'KEY' = 'KEY'
const getData = (): List => {
	// JSON.parse 的参数要是string
	// 而localStorage.getItem 获取到的结果可能是 null
	// JSON.parse() 得到的结果可以是任意类型
	return JSON.parse(localStorage.getItem('KEY') || '[]') as List
}

步骤三：储存数据的方法+渲染数据

代码截图如下：

源码如下：

// ! #5. 储存数据的方法
const saveDataToLocal = (): void => {
	// 先获取本地数据
	const arr: List = getData()
	arr.push({
		count: arr.length ? arr[arr.length - 1].count + 1 : 1,
		time: formatTime()
	})
	localStorage.setItem(KEY, JSON.stringify(arr))
}

// ! #6. 渲染函数
const render = () => {
	saveDataToLocal()
	const arr = getData()
	// const IApp = document.querySelector('#app') as HTMLDivElement   // 断言方法
	const IApp = document.querySelector('#app')
	if (IApp) {
		IApp.innerHTML = arr.map((item) => `<li>第 ${item.count} 次访问，时间${item.time} </li>`).join('')
	}
}
render()

export {}

结果呈现如下：