Javascript 如何保存动态级联下拉列表的结果？

我有两个级联下拉列表，当页面加载时，数据加载到第一个DDL，当从该列表中选择项时，它将进入数据库并获取匹配项并填充第二个DDL。我希望避免在选择时两次访问DB。 例如，我正在加载汽车制造商的第一个DDL，然后单击丰田接下来发生的事情是它进入DB并获取所有丰田车型并填充第二个DDL，然后我选择不同的汽车制造商，同样的事情发生。现在，当我再次从第一个列表中选择Toyota时，它将不会进入DB，它将从以前的请求中提取数据

---

我想保留一个请求对象（比如字典），这样如果已经请求了项，它就不会返回数据库，而是使用本地保存的数据。

您可以通过Javascript中的本地存储来存储从服务器返回的列表。通过使用setItem（）函数，如下所示

window.localStorage.setItem('Toyota', 'Models');

丰田是关键，车型是价值所在。还请注意，LocalStorage只能存储字符串

要存储数组或对象，必须将它们转换为字符串

为此，我们在传递给setItem（）之前使用JSON.stringify（）方法

现在，当您选择不同的汽车制造商时，请首先在LocalStorage对象中检查其值

它只接受一个作为键的参数，并以字符串形式返回值

要检索存储在上面的Toyota钥匙：

window.localStorage.getItem('Toyota');

这将返回一个值为的字符串

“{“1”:”Model-1”,”2”:”Model-2”}”

要使用此值，必须将其转换回对象

为此，我们使用JSON.parse（）方法将JSON字符串转换为Javascript对象

JSON.parse(window.localStorage.getItem('Toyota'));

请记住检查您的浏览器是否支持本地存储

if (typeof(Storage) !== "undefined") {
  // Code for localStorage
} else {
  // No web storage Support.
}

---

如@Rahat Hameed所述，如果级联下拉值不经常更改，或者可以更改，例如（可以通过一些逻辑更新），则可以通过JavaScript执行此操作。然后，您可以使用它从数据库中获取这些值。

您可以使用Map（）对象根据键存储数据。 查找更多信息：

---

它在大多数现代浏览器中都有支持。这方面的最佳教程是。

HTTP中已经存在缓存。我可能更愿意利用这一点，而不是创建自己的客户端JavaScript缓存……在启用HTTP缓存的策略之上，我还将数据保存在内存中，这样在页面的生命周期内，您就不需要对数据发出多个HTTP请求。

if (typeof(Storage) !== "undefined") {
  // Code for localStorage
} else {
  // No web storage Support.
}

var brandModelsList = new Map();
function getBrandModels(brand)
{
    if(brandModelsList.has(brand))
    {
        modelList =  JSON.parse(brandModelsList.get(brand));
        // Do stuff with second dropdown
    }
    //Your ajax stuff to get data
    $.ajax({
        url: 'server url',
        data: {name: brand},
        dataType: 'json',
    }).done(response => { 
        brandModelsList.set(brand, JSON.stringify(response));
        // Do stuff with second dropdown
    });
}