点击存储到固定时间清除存储

这段代码，无意间想到的，随便写了下来。

运行：根据点击之后传递一个参数，将他存入本地存储（方便测试为10秒），10秒后触发下一个事件，清除本地存储。结束

<template>
    <div>
    <div @click="dianji(112456789845678876556)">
    点击我
    </div>
    </div>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    
    const dianji = (e) => {
    console.log(e);
    
    // 将参数保存到本地存储
    localStorage.setItem('myData', JSON.stringify(e));
    
    // 设置存储的过期时间为10秒
    const expirationTime = new Date().getTime() + 10 * 1000;
    localStorage.setItem('expirationTime', expirationTime.toString());
    
    // 10秒后删除本地存储的数据
    setTimeout(() => {
    localStorage.removeItem('myData');
    localStorage.removeItem('expirationTime');
    }, 10 * 1000);
    }
    
    // 在组件创建时检查本地存储是否过期并删除
    const expirationTime = localStorage.getItem('expirationTime');
    if (expirationTime && new Date().getTime() > Number(expirationTime)) {
    localStorage.removeItem('myData');
    localStorage.removeItem('expirationTime');
    }
    </script>
    
    <style scoped>
    </style>