奇怪的缓存问题 Chrome答案

【问题标题】：Weird Cache Problems Chrome奇怪的缓存问题 Chrome
【发布时间】：2021-04-04 13:30:48
【问题描述】：

所以我对 Chrome 如何缓存信息感到非常困惑，我的问题是我无法在传单地图中加载。当我在本地 IIS 中运行此代码时，Chrome 会缓存旧站点数据并且不再更新。然后我使用 ngrok 并清除缓存，我没有更多的地图。

目前我的地图甚至不再在本地加载，我确信这很容易，我遗漏了一些东西，请有人向我解释一下，或者指向一个资源来帮助我。感谢您的帮助！

Javascript：

    // Create map and get user location
$(document).ready(() => {
    createMap()
});

// Map function
const createMap = async () => {
    "use strict"
    let map = L.map('mapid').setView([51.505, -0.09], 13);

    const tileOptions = {
        maxZoom: 5,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }
    let OpenStreetMap_Mapnik = await L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', tileOptions).addTo(map);
}

// Update countries list
const getCountry = $.ajax("libs/php/getCountry.php")

getCountry
    .done(result => {
        if (result.status.name == "ok") {
            result["data"].forEach(el => {
                $('#countryList').append(new Option(el["name"], el["iso_a2"]));
            });
        }
    })
    .catch(err => {
        console.log(err)
    })

// DOM update
$("#search").click(() => {
    console.log($("#countryList").find(":selected").text());

    // // GET COUNTRY BORDERS
    $.ajax({
        url: "libs/php/getCountryBorders.php",
        type: 'POST',
        dataType: 'json',
        data: {
            country: $('select').val(),
        },
        success: function(result) {
            // ADD COUNTRY BOUDS
            console.log(result["data"]);
        },

        error: function(err) {console.log(err)}
    })
})

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="apple-touch-icon" sizes="180x180" href="source/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="source/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="source/favicon-16x16.png">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    
    <link rel="stylesheet" href="/libs/styles/style.css">
    <title>Gazetter</title>
</head>
<body>
    <div id="mapid"></div>
    <!-- <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4">
                <select name="countryList" id="countryList" class="form-control">
                    <option value="">Select Country</option>
                </select>
                <button type="button" name="search" id="search" class="btn btn-info">Search</button>
            </div>
            <div class="col-xs-8">
                <div id="mapid"></div>
            </div>
        </div>
    </div> -->

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="/libs/javascript/script.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript html leaflet ngrok

【解决方案1】：

在所有会加载一些不会刷新的数据的 URL 的末尾添加一个随机字符串或数字。

类似这样的：

const getCountry = $.ajax("libs/php/getCountry.php?rand=" + Math.random())

【讨论】：

问题在于传单中的地图而不是 ajax 调用中的地图

【解决方案2】：

您已经禁用了 ID 为 countryList 和 search 的 html，那么 js 可能会在 $('#countryList').append(new Option(el["name"], el["iso_a2"]));、console.log($("#countryList").find(":selected").text());、country: $('select').val() 行中抛出错误。

我建议只测试干净的地图而不加载数据。

我也从未见过 await L.tileLayer(' 我不知道这是否正确，但在没有await 的情况下测试它

【讨论】：