这段代码,无意间想到的,随便写了下来。
运行:根据点击之后传递一个参数,将他存入本地存储(方便测试为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>