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，我们可以通过以下方式保存对象localStorage

let 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();

        }

    }

}

// -------- save

cities.push('Shen Yang')

localStorage.setItem('cities', JSON.stringify(cities))