VueJS中localStorage复选框值格式化及Supabase查询适配

开发者阿泽

2026-8-6

解决方法

1. 解析LocalStorage里的ID数组

你存数据时用JSON.stringify把数组转成了字符串，所以取出来得先解析回JavaScript数组，还要处理初始为空的情况：

// 解析存储的ID数组，没数据时返回空数组
const storedIds = localStorage.getItem('comparable');
const selectedIds = storedIds ? JSON.parse(storedIds) : [];

2. 用Supabase的`.in()`方法查多个ID

Supabase的.eq()只能匹配单个值，要匹配多个ID得用.in()方法，它接受字段名和值数组作为参数：

const fetchData = async () => {
  // 空数组直接返回空结果，避免无效查询
  if (selectedIds.length === 0) {
    Filteredlist1.value = [];
    return;
  }

  const { data } = await supabase
    .from("airbnb")
    .select()
    .in('id', selectedIds); // 替换.eq为.in，传入解析后的ID数组

  Filteredlist1.value = data || [];
};

完整修改后的目标组件代码

import { ref, onMounted } from 'vue';

// 获取并解析存储的ID数组
const storedIds = localStorage.getItem('comparable');
const selectedIds = storedIds ? JSON.parse(storedIds) : [];

const Filteredlist1 = ref([]);

const fetchData = async () => {
  if (selectedIds.length === 0) {
    Filteredlist1.value = [];
    return;
  }

  const { data } = await supabase
    .from("airbnb")
    .select()
    .in('id', selectedIds);

  Filteredlist1.value = data || [];
};

// 组件挂载时自动执行查询
onMounted(() => {
  fetchData();
});