如何在`created`生命周期钩子中使用`sessionStorage`实现缓存

<template>  <div>    <ul>      <!-- 遍历展示列表数据 -->      <li v-for="item in cachedList" :key="item.id">{{ item.name }}</li>    </ul>  </div></template>
<script>export default {  data() {    return {      initParams: {},      queryParams: {        upCode: ''      },      cachedList: [] // 用于存储列表数据，初始为空数组    };  },  created() {    // 获取路由中的查询参数    let query = this.$route.query;    this.initParams = query;    this.queryParams.upCode = query.code;
    // 生成缓存的键，使用 upCode 确保不同的 upCode 有不同的缓存    const cacheKey = `list_cache_${this.queryParams.upCode}`;    // 从 sessionStorage 中尝试获取缓存数据    const cachedData = sessionStorage.getItem(cacheKey);
    if (cachedData) {      // 如果缓存存在，将其解析为 JavaScript 对象并赋值给 cachedList      this.cachedList = JSON.parse(cachedData);      console.log('使用缓存数据');    } else {      // 如果缓存不存在，调用获取数据的方法并传入缓存键      this.getList(cacheKey);    }  },  methods: {    getList(cacheKey) {      // 模拟一个异步请求来获取数据，这里使用 setTimeout 模拟延迟      setTimeout(() => {        // 模拟从服务器获取到的数据        const listData = [          { id: 1, name: '商品 1' },          { id: 2, name: '商品 2' },          { id: 3, name: '商品 3' }        ];        // 将获取到的数据赋值给 cachedList        this.cachedList = listData;        // 将数据存入 sessionStorage 中，需要将对象转换为 JSON 字符串        sessionStorage.setItem(cacheKey, JSON.stringify(listData));        console.log('数据已缓存');      }, 1000);    }  }};</script>