JavaScript如何将用户输入数字转换为对象对应键值对并存入localStorage

你现有代码存在几个核心问题导致逻辑失效：

• 输入框读取到的drinkInputVal是字符串类型，用===和数字做严格相等判断时，会因为类型不一致直接返回false，所有匹配逻辑都不会生效
• replace方法会返回新字符串，你没有把返回值赋值给变量，原变量完全不会被修改，替换操作等于无效执行
• 第5个餐品的判断逻辑里你把替换的目标值写错成了'4'，就算前面逻辑生效，选第5项也会得到错误结果
• 当前逻辑只存储了餐品名称，没有同步存储对应价格，不符合你要存完整键值对的需求
• 写5个独立if判断过于冗余，完全可以用输入值直接计算下标取对应餐品，后续加新品也不用修改判断逻辑

// 存储用户订单的数组
let customerDrinkOrder = [];

// 饮品对象
let drinks = {
    "Earl gray ": 24.99,
    "Mocha ": 43.50,
    "Milkshake ": 36.60,
    "Coke ": 12.45,
    "Appletiser ":19.90
};
// 提前把所有饮品key转为数组，方便后续用下标取值
const drinkList = Object.keys(drinks);

function addDrinkToStorage(){
    let drinkInputVal = document.querySelector('#menuItemSelected').value;
    // 先把输入值转成数字，同时判断是否是有效数字、是否在可选范围内
    const selectIndex = Number(drinkInputVal);
    if(isNaN(selectIndex) || selectIndex < 1 || selectIndex > drinkList.length){
        alert('ERROR! 请输入有效的菜单编号')
        // 输入不合法直接终止后续逻辑
        return
    }
    // 直接用下标取对应餐品名称和价格，下标减1是因为用户输入从1开始，数组下标从0开始
    const selectedDrinkName = drinkList[selectIndex - 1];
    const selectedDrinkPrice = drinks[selectedDrinkName];
    // 把完整的餐品信息对象存入数组
    customerDrinkOrder.push({
        name: selectedDrinkName,
        price: selectedDrinkPrice
    });
    // 存入localStorage
    localStorage.setItem('drinkOrders', JSON.stringify(customerDrinkOrder));
    
    // 可直接在此处添加渲染购物车的逻辑，遍历customerDrinkOrder取值展示即可
}

// 页面加载时读取本地存储的历史订单
if(localStorage.getItem('drinkOrders')){
    customerDrinkOrder = JSON.parse(localStorage.getItem('drinkOrders'));
    console.log(customerDrinkOrder);
    // 此处可添加逻辑，把历史订单渲染到购物车区域
}

现在存储到localStorage里的是包含餐品名称+价格的对象数组，渲染购物车时直接遍历customerDrinkOrder数组，取每个元素的name和price属性展示即可。后续如果新增饮品，只需要往drinks对象里添加键值对即可，不需要修改判断逻辑，代码会自动适配可选范围。

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