Django新手求助：如何存储用户输入并实现临时品牌展示？

方案分析 #

先逐个排除不合适的选项：

• Django数据库：完全没必要。你的需求是临时会话级存储（关闭标签页即清空），数据库是持久化存储，会永久保留数据，还需要额外编写模型、视图等后端代码，大幅增加复杂度，对新手不友好。
• Cookies：可用但冗余。Cookie会随每个HTTP请求发送到后端，而你的场景不需要后端参与数据存储；且Cookie有4KB大小限制，操作也不如SessionStorage直观。
• JavaScript SessionStorage：完美匹配需求。SessionStorage是浏览器提供的会话级存储，仅在当前标签页会话中有效，关闭标签页后自动清空；无需后端参与，操作简单，适合纯前端临时数据存储。

具体实现思路 #

1. 定义车型-品牌映射：如果映射关系固定，直接在前端用JS对象存储（若后续需要动态更新，再考虑后端接口拉取）：

const modelBrandMap = {
  "Ibiza": "Seat",
  "E92": "BMW",
  // 可添加更多车型映射
};

2. 处理用户输入并存储品牌列表：监听输入事件，匹配品牌后更新SessionStorage中的列表：

// 假设输入框ID为car-model-input，展示列表的容器ID为brand-list
const inputEl = document.getElementById('car-model-input');
const listEl = document.getElementById('brand-list');

inputEl.addEventListener('blur', function() {
  const inputValue = this.value.trim();
  const matchedBrand = modelBrandMap[inputValue];
  
  if (matchedBrand) {
    // 从SessionStorage读取已有列表，无则初始化为空数组
    let brandList = JSON.parse(sessionStorage.getItem('brandList')) || [];
    // 避免重复添加
    if (!brandList.includes(matchedBrand)) {
      brandList.push(matchedBrand);
      sessionStorage.setItem('brandList', JSON.stringify(brandList));
    }
    // 更新页面展示
    renderBrandList(brandList);
  }
});

// 渲染品牌列表的函数
function renderBrandList(list) {
  listEl.innerHTML = list.map(brand => `<li>${brand}</li>`).join('');
}

3. 页面加载时恢复列表：页面初始化时读取SessionStorage数据并展示：

window.addEventListener('load', function() {
  const savedList = JSON.parse(sessionStorage.getItem('brandList')) || [];
  renderBrandList(savedList);
});

总结 #

这种方案无需后端数据库或Cookie，仅用前端JS即可实现需求，代码简单易懂，完全贴合你“关闭标签页清空数据”的要求，是最适合你的选择。

内容的提问来源于stack exchange，提问作者Vampired