vue实现页面刷新，倒计时不重置

项目一般进行短信验证之类时，会有这个需求；在点击按钮获取短信验证码倒计时的时候，页面刷新倒计时不会被初始化。

<template>
    <div>
        <button @click="handleClick">{{ disabled ? timeCount + ' s' : '按钮' }}</button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 按钮是否禁用
const disabled = ref(false)
// 固定时间
const seconds = ref(30)
// 倒计时
const timeCount = ref(30)

onMounted(() => {
    let startTime = sessionStorage.getItem('start')
    let diffTime = (+new Date() - startTime) / 1000;
    let result = seconds.value - parseInt(diffTime);
    if (result > 0) {
        disabled.value = true;
        timeCount.value = result;
        handleCount()
    }
})

// 点击事件
const handleClick = () => {
    // 按钮被禁用结束
    if(disabled.value) return
    console.log('true')
    disabled.value = true;
    handleCount();
    sessionStorage.setItem('start', +new Date());
}

// 处理倒计时
const handleCount = () => {
    let timer = setInterval(() => {
        timeCount.value -= 1;
        if (timeCount.value === 0) {
            clearInterval(timer);
            disabled.value = false;
            timeCount.value = seconds.value;
            sessionStorage.removeItem('start')
        }
    }, 1000)
}

</script>