Javascript 在本地存储中存储和重用数据，而不是对数据库进行新的调用

我有一些功能，可以在包含距离的数组中循环，并通过AJAX在db中检查相对于当前位置的结果。它工作得很好，但是我想检查一下以前的坐标是否在距离当前坐标一英里的范围内——重用以前返回的数据

我找到了一个进行比较的函数，并包装了我以前的功能，但有些功能不起作用，我没有得到任何返回的结果

// check for distance between current and previous location in km
function dstbtw(lat1, lon1, lat2, lon2) {
    var lat2 = (lat2 === null ? 0 : lat2); // I added this to have 0 instead of null 
    var lon2 = (lon2 === null ? 0 : lon2); // same here
    var p = 0.017453292519943295;    // Math.PI / 180
    var c = Math.cos;
    var a = 0.5 - c((lat2 - lat1) * p)/2 + 
            c(lat1 * p) * c(lat2 * p) * 
            (1 - c((lon2 - lon1) * p))/2;
    
    return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km
}

// wrapped with this conditional check - 1.6 roughly a mile
if (localStorage.getItem("lat") !== null &&
    dstbtw(lat, lon, localStorage.getItem("lat"), localStorage.getItem("lon")) > 1.6) {

    // put lat lon into local storage for reference later
    localStorage.setItem("lat", lat); 
    localStorage.setItem("lon", lon);

    // from here on is old code that works fine
    const DISTANCES = [1, 3, 5, 10, 20, 50];
    
    (async () => {
        const url = new URL("/ajax.php", window.location.origin);
    
        const headers = new Headers([
            [
                "Content-Type",
                "application/x-www-form-urlencoded; charset=UTF-8",
            ]
        ]);
    
        const body = new URLSearchParams([
            ["lt", lat],
            ["ln", lon]
        ]);                                 
                            
        for (const distance of DISTANCES) {
            document.getElementById("lst-loader").append(msg);
            document.getElementById("prx").innerHTML = distance + " mile" + (distance > 1 ? "s" : "");
            
            body.set("mi", distance);
    
            const res = await fetch(url, {
                method: "POST",
                headers,
                body,
            });
                                
            if (res.ok) {                                
                let locations = await res.text();
                
                if (locations != "no results") {
                    localStorage.setItem("loc", locations); // if results returned store locally

                    document.getElementById("lst").innerHTML = locations;
                    document.getElementById("lst-loader").remove();
                    
                    // show markers on hover
                    var i = 0;
                    let loc = document.querySelectorAll("a[data-lat]");
                        
                    loc.forEach(function(node) {
                        node.addEventListener("mouseenter", locOver);
                        node.addEventListener("mouseleave", locOut);
                        node.id = i++;
                    });
                                                
                    var markers = [];
                    
                    function locOver(event) {
                      var target = event.target;
                      if (markers[target.id]) {
                        markers[target.id].addTo(map);
                        }
                      else {
                        var llt = target.dataset["lat"];
                        var lln = target.dataset["lon"];
                        marker = L.marker([llt, lln]).addTo(map); 
                        markers[target.id] = marker;
                      }
                    }
                                          
                    function locOut(event) {
                      markers[event.target.id].remove();
                    }
                    
                    break;
                }
            }
        }
    })();
   
// added below while testing my code 
} else {
    // use data from local storage
    document.getElementById("lst").innerHTML = localStorage.setItem("loc");
    
    // show markers on hover
    var i = 0;
    let loc = document.querySelectorAll("a[data-lat]");
        
    loc.forEach(function(node) {
        node.addEventListener("mouseenter", locOver);
        node.addEventListener("mouseleave", locOut);
        node.id = i++;
    });
                                
    var markers = [];
    
    function locOver(event) {
      var target = event.target;
      if (markers[target.id]) {
        markers[target.id].addTo(map);
        }
      else {
        var llt = target.dataset["lat"];
        var lln = target.dataset["lon"];
        marker = L.marker([llt, lln]).addTo(map); 
        markers[target.id] = marker;
      }
    }
                          
    function locOut(event) {
      markers[event.target.id].remove();
    }
}

---

我感觉自己很接近，但却在绕圈子跑。我在这里遗漏了什么？

现在，您正在检查两个

条件是否都
正确
：

if（localStorage.getItem（“lat”）！==null&&
dstbtw（lat、lon、localStorage.getItem（“lat”）、localStorage.getItem（“lon”））>1.6）

尝试检查是否只有一个条件是
true
：

if（localStorage.getItem（“lat”）==null||
dstbtw（lat、lon、localStorage.getItem（“lat”）、localStorage.getItem（“lon”））>1.6）
假设您的
a[data lat]
元素是从ajax返回的，那么错误在于您没有正确填充
#lst
元素

当您想使用localStorage中的数据时，使用的是
setItem
，而不是正确的
getItem

document.getElementById("lst").innerHTML = localStorage.setItem("loc");

应该成为

document.getElementById("lst").innerHTML = localStorage.getItem("loc");

我想OP想要两张支票。首先要确保存储了先前的值，然后测试先前位置和当前位置之间的距离。正确，我想检查两者。首先，如果我在本地存储器中存储了值，第二，如果距离超过1英里，则获取新结果，如果没有，则使用存储的结果而不查询数据库。