js localStorage for 循环包含空字符串

Question

我现在正在创建包含天气信息的网站。我有一个特殊的表单（.html 文件），它添加新城市的信息作为无序列表。localStorage当用户意外刷新页面时，我还用于保存城市。

localStorage据我所知，仅存储字符串。当用户添加新城市时，脚本会更新localStorage。为了刷新页面，提供了刷新按钮。

当用户刷新页面时，所有城市都消失了，因此脚本将恢复所有城市localStorage。数组值在 JS 中[]表示为 String 值""。问题是，当脚本尝试恢复城市时，""值也会作为城市值提供。

代码：

    let cities = [];

    if (localStorage.getItem("cities") !== null) {

        cities = localStorage.getItem("cities").split(',');

    }

    console.log("cities = " + cities);

    for (const city of cities) {

        if (city !== "" && !screen_cities.includes(city)) {

            const rnd = Math.random().toString();

            const code = await add_new_li(city, rnd);

            if (code === 1) {

                console.warn("for city " + city + " code is " + code);

                document.getElementById(rnd).remove();

            }

        }

    }

Array.prototype.forEach不是这样，但由于异步函数我无法使用它add_new_li。

请帮我。

Answer 1

使用 JSON.stringfy 和 JSON.parse，我们可以通过以下方式保存对象localStoragelet cities = [];if (localStorage.getItem("cities") !== null) {    cities = JSON.parse(localStorage.getItem("cities"))}console.log("cities = " + cities);for (const city of cities) {    if (city !== "" && !screen_cities.includes(city)) {        const rnd = Math.random().toString();        const code = await add_new_li(city, rnd);        if (code === 1) {            console.warn("for city " + city + " code is " + code);            document.getElementById(rnd).remove();        }    }}// -------- savecities.push('Shen Yang')localStorage.setItem('cities', JSON.stringify(cities))