javascript - 多次存储相同的本地存储项目

Question

我可以输入文本并搜索数据，然后存储该数据，在本例中为名称。

localStorage.setItem("name", currentWeather.name);

使用 for 循环(在同一页面上)，我可以进行多次搜索，每次搜索的名称数据都会显示在页面上。

    for (var i = 0; i < localStorage.length; i++){
    $("#record").append(localStorage.getItem(localStorage.key(i)));
    }

我现在希望能够存储每个名字，所以当我返回那个页面时它仍然会显示所有名字。目前本地存储只能存储最新的名字。我猜我需要创建一个数组，我可以将每个搜索词存储到其中但不确定如何去做。我看到一些建议可以通过这种方式完成，而其他人只是简单地说这是不可能的。

$(document).ready(function(){

    $('#submitLocation').click(function(){

        //get value from input field
        var city = $("#city").val();

        //check not empty
        if (city !== ''){

            $.ajax({
                url: "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric" + "&APPID",
                type: "GET",
                dataType: "jsonp",
                success: function(weatherData){
                    var currentWeather = showCurrent(weatherData);
                }
            });

        }else{
            $('#error').html('Field cannot be empty');
        }
    });
});


function showCurrent(currentWeather) {
console.log(currentWeather);
console.log(currentWeather.name);

    if (typeof(Storage) !== "undefined") {

        // Store
        //saves name in local storage (for histoy list)
        localStorage.setItem("name", currentWeather.name);

        //saves name in session storage for current use
        sessionStorage.setItem("name", currentWeather.name);

        // Retrieve

        // Retrieves name from session storage 
        document.getElementById("name").innerHTML = sessionStorage.getItem("name");

        // Retrieves name from local storage for history list
        document.getElementById("name").innerHTML = localStorage.getItem("name");

        // Outputs all locations searched
        for (var i = 0; i < localStorage.length; i++){
        $("#record").append(localStorage.getItem(localStorage.key(i)));
        }

}


    else {
        document.getElementById("error").innerHTML = "Sorry, your browser does not support Web Storage...";
    }

Answer 1

localStorage 仅存储字符串，因此要存储数组或对象，您可以使用 JSON.stringify。

var names = [ 'Philbo', 'Nipwip', 'Henk' ];
localStorage.setItem( 'names', JSON.stringify( names ) );

然后您使用 JSON.parse 检索它。

var names = JSON.parse( localStorage.getItem('names') );

让我们变得愚蠢并在一行中附加一个新名称:

localStorage.setItem( 'names',
    JSON.stringify(
        JSON.parse(
            localStorage.getItem( 'names' ) || '[]'
        ).concat([ 'Billiam' ])
    )
)

针对您的问题:

var weather = [];
function showCurrent(currentWeather) {

    weather.push( currentWeather.name );

    if (typeof(Storage) !== "undefined") {

        localStorage.setItem("weather", JSON.stringify( weather ) );

        ...

        document.getElementById("name").innerHTML = JSON.parse( localStorage.getItem("weather") );