vue localStorage将后端数据存在浏览器中 避免多次请求后端数据

const key = `${startDate}_${endDate}_${symbol}`; // 将三个字段合并为一个字符串作为 klineData 对象的属性名
const cachedData = localStorage.getItem(key); // 尝试从本地存储中获取数据
if (cachedData) {
        // 如果本地存储中有数据，直接返回
        data = JSON.parse(cachedData);
        console.log('数据已存在')
      } else {
        console.log('正在下载新数据')
        this.axios.get(url).then((resp) => {
          data = resp.data // 上面用prop 接收 这里给 --> 第三步 给datalist 赋值

          // 将数据存起来 避免多次重复获取
          localStorage.setItem(key, JSON.stringify(data)); // 将获取的数据转化为字符串存入 localStorage 中

        });
      }

Failed to execute 'setItem' on 'Storage': Setting the value of '2023/1/1 00:00:00_2023/1/5 00:00' 


localStorage是用于客户端存储数据的API，常用于在浏览器中保持持久存储。
每个域名下的localStorage一般限制为5MB左右，如果存储的数据超过限制，
就会出现这个错误。

解决这个问题的方法有以下几种：

1.清空部分或全部localStorage数据，可以通过localStorage.clear()方法清空所有数据，
或者手动删除需要清空的数据项。
2.将数据存储到服务器端，避免存储过多的localStorage数据。
3.对于大量存储的数据，可以使用IndexedDB等其他方式进行存储。IndexedDB是一个高级的本地存储API，可以支持更大容量的存储并具有更多的查询和排序功能