vue3将数据放在本地缓存，并取出、删除操作，以及监听用户刷新操作。

原创于 2023-03-24 14:21:23 发布

· 2.4k 阅读

1 ·

版权

文章标签：

#缓存 #前端 #vue

文章讲述了如何利用JavaScript的window.sessionStorage对象进行本地数据缓存，包括设置数据、读取数据的步骤。同时，它还详细说明了如何监听页面刷新事件，并在刷新前清除已存储的缓存数据，以保持数据的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、将数据放在本地缓存：

window.sessionStorage.setItem("tempList", JSON.stringify(res.result));
router.push(url)

二、并取出、删除操作：
//取出

const tempList: any = ref({})
tempList.value = window.sessionStorage.getItem('tempList')


三、以及监听用户刷新操作，在刷新之前删除缓存的数据：

```html
window.addEventListener("beforeunload", function (e) {
      tempList.value = {}
      window.sessionStorage.removeItem('tempList')
      console.log('删除缓存数据：', tempList.value)
});