vue3.0使用localstorage根据ID不同,存储多组对象

最新推荐文章于 2025-05-04 14:28:46 发布

欢喜~999

最新推荐文章于 2025-05-04 14:28:46 发布

阅读量2k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_52761651/article/details/127515562

版权

博客主要介绍了JavaScript中使用localstorage的相关操作，包括存储对象、取出存储的对象，以及根据不同id存储多组对象等内容。

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

1. localstorage存储对象

let localData = {};
//query.id是要存储的对象的key值
localData[query.id] = { page: 1, label: algConfigData.outData[0] };
//localData为你存储对象的名称，data是你要存储的内容
window.localStorage.setItem("localData", JSON.stringify(data));

2. 取出localstorage中存储的对象

window.localStorage.getItem("localData");
//由于存储的是对象，所以需要使用JSON.parse将对象转化为字符串
JSON.parse(window.localStorage.getItem("localData"));

3. 使用localstorage根据id不同，存储多组对象

//首先进入页面需要先判断是否存在localData
if (window.localStorage.getItem("localData")) {
    //如果值存在，我们可以先获取到存储的数据
    const data = JSON.parse(window.localStorage.getItem("localData"));
    const id = query.id;
    //因为要根据id的不同，来存储不同数据
    //如果当前id存在，修改page的值
    if (data[id]) {
      page.value = data[id].page;
      annotationStore.setCurrentLabel(data[id].label);
    } else {
   //如果id不存在，这时就可以使用setItem存储新的数据（这样根据id来判断，就不会覆盖原来存储的数据）
      data[id] = { page: 1, label: currentLabel.value };
      window.localStorage.setItem("localData", JSON.stringify(data));
    }
  }