vue缓存到localStorage

本文介绍了一种利用浏览器localStorage来实现对商家收藏状态管理的方法,包括如何保存和读取这些状态。

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

构建模块

// 存储每个商家是否收藏
// id是商家id  
// key是要存储的键favorite
// value是存储的值布尔
export function saveToLocal(id, key, value) {
  // 先把__seller__存储到h5缓存localStorage中
  let seller = window.localStorage.__seller__;
  // 如果seller是第一次存储
  if (!seller) {
    // 创建数据结构 seller = {id: {}}
    seller = {};
    seller[id] = {};
  } else {
    // 存储的JSON字符串转换为json对象
    seller = JSON.parse(seller);
    // 如果localStorage的__seller__中没有这个商家id
    if (!seller[id]) {
      // 就给它的值创建为对象
      seller[id] = {};
    }
  }
  // 最终把是否收藏的值存储到 localStorage中 商家id为123的key键中
  seller[id][key] = value;
  // 将JSON转换成为JSON字符串
  window.localStorage.__seller__ = JSON.stringify(seller);
  // 存储后的localStorage 就是 __seller__:"{"12345":{"favorite":true}}"
};
// 读取每个商家是否收藏
// id是商家id  
// key是要存储的键
// def是当没有这个seller对象时返回def默认值
export function loadFromLocal(id, key, def) {
  let seller = window.localStorage.__seller__;
  if (!seller) {
    return def;
  }
  // 读取之后要将JSON字符串转换成为JSON对象,同时拿到对应的id
  seller = JSON.parse(seller)[id];
  if (!seller) {
    return def;
  }
  let ret = seller[key];
  // 如果查询不到id就返回默认值
  return ret || def;
};

用的时候直接往里面传参

  methods: {
    toggleFavorite () {
      this.favorite = !this.favorite;
      // 使用
      saveToLocal(this.seller.id, 'favorite', this.favorite)
    },
  }

 

转载于:https://www.cnblogs.com/gr07/p/9105532.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值