文本緩存在重裝

我創建是從一個CSV文件中讀取信息的列表的HTML頁面。該網頁供我的工作場所內部使用，我可以忍受一些未處理的兼容性問題。我正在使用Chrome來使頁面正常工作，並且我可能會遲到解決IE/Edge兼容性問題。文本緩存在重裝

我的問題是，當我在動態創建的表編輯的數據和新的數據被保存並重新加載頁面（使用PHP），瀏覽器顯示的日期從編輯之前。

我怎麼能強迫瀏覽器更新的文件重新加載？

我已經嘗試了所有<meta ***>解決方案，我已經能夠找到並且正如您在php文件中看到的，我已經嘗試了php頭解決方案。我發現的唯一工作是檢查Chrome的開發人員工具中的「禁用緩存」，該解決方案對於不懂技術的用戶來說並不是最佳選擇。

HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
    <meta HTTP-EQUIV="Expires" CONTENT="-1"> 
    <title>Some title</title> 

    <style> 
     table { 
      font-family: arial, sans-serif; 
      border-collapse: collapse; 
      width: 100%; 
     } 

     td, th { 
      border: 1px solid #dddddd; 
      text-align: left; 
      padding: 8px; 
     } 

     tr:nth-child(even) { 
      background-color: #dddddd; 
     } 
    </style> 

    <link rel="stylesheet" type="text/css" href="cssData.css"> 
</head> 

<body onload='getData("")'> 
    <div class='wrap'> 
     <h1 id='createdDate' align='center'>Header</h1> 
     <br> 
     <div> 
      <form action="phpFunc.php" id="some" name="someName" method="post" align='center'> 
       <input type='button' id='edit' onclick='editData()' value='btn1' style='display:inline;' /> 
       <input type='button' id='add' onclick='addData()' value='btn2' style='display:none;' /> 
       <input type='button' id='save' onclick='saveData()' value='btn3' style='display:none;'/> 

       <input type="text" id="tempText" class="someClass" value="Test" name="fileWrite" style='display:none;'/> 
       <input type="submit" id='saveBtn' value="" class="submitClass" style='display:none;'/> 

       <input type='button' id='cancel' onclick='cancelEdit()' value='btn4' style='display:none;'/> 
      </form> 
     </div> 
     <table id='dataTable'></table> 
     <br><br><br><br> 
    </div> 
    <div class='footer'> 
     <i>Made by some guy</i> 
    </div> 
    <script src="functions.js"></script> 
</body>

JS的功能的文件：

var list = "", colNames = ["Kursus", "Image", "RAM", "SSD"]; 
var noCol = 4; 

function getData(addon) { 
if (window.File && window.FileReader && window.FileList && window.Blob) { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      visualFormating(this.responseText, addon); 
     }else if (this.status == 404){ 
      visualFormating("",""); 
     } 
    }; 
    xhttp.open("GET", "Data.csv", true); 

    xhttp.send(); 
} else { 
    alert("Functionen er ikke understøttet i denne browser."); 
} 
}; 

function visualFormating(input, addon){ 
if(input.length > 0 || addon.length > 0){ 
if(list.length < 1){ 
    input = input.replace(/(\")+/g,'') 
    var array = input.split('\n'); 
    var text = ""; 
    var temp = array[0].split(';'); 

    for (var i = 0; i < array.length; i++){ 
     var temp = array[i].split(';'); 
     if(temp.length == 4){ 
     text += "<tr>"; 

     if(i != 0){ 
      for (var j = 0; j < temp.length; j++){ 
       text += "<td contenteditable='false'>" + temp[j]; 
       text += "</td>"; 
      } 
      text += "<td class='checkboxes' style='display:none'><input type='checkbox' id='check"+i+"'>" 
     }else{ 
      for (var j = 0; j < temp.length; j++){ 
       text += "<th onclick='sortTable("+j+")' style='cursor: pointer;'>" + temp[j]; 
       text += "</th>"; 
      } 
      text += "<th id='delete' class='checkboxes' style='display:none'>Slet</th>"; 
     } 

     text += "</tr>";} 
    } 
}else{ 
    text = list 
} 
}else{ 
    text = "<tr>"; 
    for (var i = 0; i < colNames.length; i++) 
    { 
     text += "<th onclick='sortTable("+i+")' style='cursor: pointer;'>" + colNames[i] + "</th>"; 
    } 
    text += "<th id='delete' class='checkboxes' style='display:none'>Slet</th></tr>"; 
} 

list = text + addon; 
text = "<table>" + list + "</table>"; 
document.getElementById('dataTable').innerHTML = text; 
}; 

function changeEditable(editable){ 
if(editable==true){ 
    var editable_elements = document.querySelectorAll("[contenteditable=false]"); 
    document.getElementById('edit').style.display = "none"; 
    document.getElementById('add').style.display = "inline"; 
    document.getElementById('save').style.display = "inline"; 
    document.getElementById('cancel').style.display = "inline"; 
    var checkboxes = document.getElementsByClassName('checkboxes'); 
    for (var i = 0; i < checkboxes.length; i++){ 
     checkboxes[i].style.display = "block"; 
    } 
}else{ 
    var editable_elements = document.querySelectorAll("[contenteditable=true]"); 
    document.getElementById('edit').style.display = "inline"; 
    document.getElementById('add').style.display = "none"; 
    document.getElementById('save').style.display = "none"; 
    document.getElementById('cancel').style.display = "none"; 
    var checkboxes = document.getElementsByClassName('checkboxes'); 
    for (var i = 0; i < checkboxes.length; i++){ 
     checkboxes[i].style.display = "none"; 
    } 
} 

for(var i=0; i<editable_elements.length; i++){ 
    editable_elements[i].setAttribute("contenteditable", editable); 
} 
} 

function saveData(){ 
changeEditable(false); 
checkDelete(); 
writeData(); 
clearEdit(); 
getData(""); 
} 

function checkDelete(){ 
var table = document.getElementById("dataTable"); 
var newList = ""; 

for (var i = table.rows.length - 1; i > 0; i--){ 
    if (document.getElementById("check"+i).checked) { 
     table.deleteRow(i); 
    } 
} 
} 

function writeData(){ 
var rows = document.getElementById("dataTable").rows; 
var text = ""; 

for (var r = 0; r < rows.length; r++){ 
    var tempText = ""; 
    for(var c = 0; c < noCol; c++){ 
     tempText += '"' + rows[r].cells[c].innerHTML + '"'; 
     if(c+2 != rows[r].cells.length) tempText += ";"; 
     else tempText += "\n"; 
    } 
    //var tempText = '"' + rows[r].cells[0].innerHTML + '";"' + rows[r].cells[1].innerHTML + '";"' + rows[r].cells[2].innerHTML + '";"' + rows[r].cells[3].innerHTML + '"' + "\n"; 
    if (!checkEmpty(tempText))text += tempText; 
} 

document.getElementById('tempText').value = encodeURIComponent(text); 
document.getElementById('saveBtn').click(); 
} 

function addData() { 
var text = "<tr>"; 

for (var i = 0; i < noCol; i++){ 
    text += "<td contenteditable='true'></td>" 
} 

text += "<td class='checkboxes' style='display:block'><input type='checkbox' id='check" + document.getElementById("dataTable").rows.length + "'></tr>"; 

updateList(text); 
} 

function updateList(input){ 
var rows = document.getElementById("dataTable").rows; 
var text = ""; 
for (var i = 0; i < rows.length; i++){ 
    text += '<tr>' + rows[i].innerHTML + '</tr>'; 
} 

list = text; 

visualFormating("", input); 
} 

function editData(){ 
changeEditable(true); 

} 

function cancelEdit(){ 
clearEdit(); 
changeEditable(false); 
getData(""); 
} 

function clearEdit(){ 
list = ""; 
} 

function checkEmpty(input){ 
input = input.replace(/"/g, ''); 
input = input.replace(/;/g, ''); 
input = input.replace(/\n/g, ''); 

if(input.length < 1) return true; 
else return false; 
} 

function sortTable(n) { 
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; 
table = document.getElementById("dataTable"); 
switching = true; 
//Set the sorting direction to ascending: 
dir = "asc"; 
/*Make a loop that will continue until 
no switching has been done:*/ 
while (switching) { 
//start by saying: no switching is done: 
switching = false; 
rows = table.getElementsByTagName("TR"); 
/*Loop through all table rows (except the 
first, which contains table headers):*/ 
for (i = 1; i < (rows.length - 1); i++) { 
    //start by saying there should be no switching: 
    shouldSwitch = false; 
    /*Get the two elements you want to compare, 
    one from current row and one from the next:*/ 
    x = rows[i].getElementsByTagName("TD")[n]; 
    y = rows[i + 1].getElementsByTagName("TD")[n]; 
    /*check if the two rows should switch place, 
    based on the direction, asc or desc:*/ 
    if (dir == "asc") { 
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { 
     //if so, mark as a switch and break the loop: 
     shouldSwitch= true; 
     break; 
    } 
    } else if (dir == "desc") { 
    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { 
     //if so, mark as a switch and break the loop: 
     shouldSwitch= true; 
     break; 
    } 
    } 
} 
if (shouldSwitch) { 
    /*If a switch has been marked, make the switch 
    and mark that a switch has been done:*/ 
    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); 
    switching = true; 
    //Each time a switch is done, increase this count by 1: 
    switchcount ++; 
} else { 
    /*If no switching has been done AND the direction is "asc", 
    set the direction to "desc" and run the while loop again.*/ 
    if (switchcount == 0 && dir == "asc") { 
    dir = "desc"; 
    switching = true; 
    } 
} 
} 
}

PHP文件：

<?php 
$file = 'Data.csv'; 
$fileWrite = ''; 
if(isset($_POST['fileWrite']) && !empty($_POST['fileWrite'])) { 
    $fileWrite = urldecode($_POST['fileWrite']); 
} 
file_put_contents($file, $fileWrite); 
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1. 
header("Pragma: no-cache"); // HTTP 1.0. 
header("Expires: 0"); // Proxies. 
header('Location: index.html') ; 
?>

的CSV是格式化如下：

"column 1";"column 2";"column 3";"column 4" 
"Data 1";"Data 2";"Data 3";"Data 4"

如果有些信息不見了，請告訴我。整個4空間使代碼塊對我來說是一團糟。

來源

2017-06-06 LeeMania

你嘗試加載'Data.csv？randomnumbereachtime'？隨機數會強制瀏覽器每次下載新的副本。 –

不，我希望有一種方法可以強制瀏覽器不要緩存網站上的任何內容。隨機數需要一些額外的編碼才能使網站能夠在第一次加載時加載csv文件，不是嗎？ – LeeMania

什麼額外的編碼？只需添加一個隨機數字，如：'「Data.csv？」 + Math.random（）'，做完了 –

只需添加一個隨機數，如："Data.csv?" + Math.random()到您的文件名。它會強制瀏覽器每次都下載新的副本。

來源

2017-06-06 12:05:02

但這會炸掉瀏覽器緩存。 –

您可以設置，當數據已過期。最簡單的技巧是使用時間戳（0）的過去。將這兩行添加到您的標題代碼中。

header('Expires: Sat, 26 Jul 1997 05:00:00 GMT'); 
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');

來源

2017-06-06 11:42:53

文本緩存在重裝

回答

相關問題