Xóa bộ đệm trong JavaScript

Làm cách nào để xóa bộ đệm của trình duyệt bằng JavaScript?

Chúng tôi đã triển khai mã JavaScript mới nhất nhưng chúng tôi không thể lấy mã JavaScript mới nhất.

Lưu ý biên tập: Câu hỏi này được nhân đôi ở những nơi sau đây và câu trả lời trong câu hỏi đầu tiên có lẽ là tốt nhất. Câu trả lời được chấp nhận này không còn là giải pháp lý tưởng.

Làm cách nào để buộc trình duyệt tải lại các tệp CSS / JS được lưu trong bộ nhớ cache?

Làm cách nào tôi có thể buộc khách hàng làm mới tệp JavaScript?

Tự động tải lại dữ liệu nguồn / json cục bộ

Bạn có thể gọi window.location.reload (đúng) để tải lại trang hiện tại. Nó sẽ bỏ qua mọi mục được lưu trong bộ nhớ cache và truy xuất các bản sao mới của trang, css, hình ảnh, JavaScript, v.v. từ máy chủ. Điều này không xóa toàn bộ bộ đệm, nhưng có tác dụng xóa bộ đệm cho trang bạn đang truy cập.

Tuy nhiên, chiến lược tốt nhất của bạn là phiên bản đường dẫn hoặc tên tệp như được đề cập trong các câu trả lời khác nhau. Ngoài ra, hãy xem Revving Filenames: không sử dụng chuỗi truy vấn vì lý do không sử dụng ?v=nlàm sơ đồ phiên bản của bạn.

Bạn không thể xóa bộ nhớ cache bằng javascript. Một cách phổ biến là nối số sửa đổi hoặc dấu thời gian được cập nhật lần cuối vào tệp, như sau:

myscript.123.js

hoặc là

myscript.js?updated=1234567890

Hãy thử thay đổi src của tệp JavaScript? Từ đây:

<script language="JavaScript" src="js/myscript.js"></script>

Về điều này:

<script language="JavaScript" src="js/myscript.js?n=1"></script>

Phương pháp này sẽ buộc trình duyệt của bạn tải một bản sao mới của tệp JS.

Khác với bộ nhớ đệm mỗi giờ hoặc mỗi tuần, bạn có thể lưu trữ theo dữ liệu tệp.

Ví dụ (trong PHP):

<script src="js/my_script.js?v=<?=md5_file('js/my_script.js')?>"></script>

hoặc thậm chí sử dụng thời gian sửa đổi tập tin:

<script src="js/my_script.js?v=<?=filemtime('js/my_script.js')?>"></script>

Bạn cũng có thể buộc mã được tải lại mỗi giờ, như thế này, trong PHP:

<?php
echo '<script language="JavaScript" src="js/myscript.js?token='.date('YmdH').'">';
?>

hoặc là

<script type="text/javascript" src="js/myscript.js?v=<?php echo date('YmdHis'); ?>"></script>

đặt cái này ở cuối mẫu của bạn:

var scripts =  document.getElementsByTagName('script');
var torefreshs = ['myscript.js', 'myscript2.js'] ; // list of js to be refresh
var key = 1; // change this key every time you want force a refresh
for(var i=0;i<scripts.length;i++){ 
   for(var j=0;j<torefreshs;j++){ 
      if(scripts[i].src && (scripts[i].src.indexOf(torefreshs[j]) > -1)){
        new_src = scripts[i].src.replace(torefreshs[j],torefreshs[j] + 'k=' + key );
        scripts[i].src = new_src; // change src in order to refresh js
      } 
   }
}

thử dùng cái này

 <script language="JavaScript" src="js/myscript.js"></script>

Về điều này:

 <script language="JavaScript" src="js/myscript.js?n=1"></script>

Đây là một đoạn của những gì tôi đang sử dụng cho dự án mới nhất của tôi.

Từ bộ điều khiển:

if ( IS_DEV ) {
    $this->view->cacheBust = microtime(true);
} else {
    $this->view->cacheBust = file_exists($versionFile) 
        // The version file exists, encode it
        ? urlencode( file_get_contents($versionFile) )
        // Use today's year and week number to still have caching and busting 
        : date("YW");
}

Từ góc nhìn:

<script type="text/javascript" src="/javascript/somefile.js?v=<?= $this->cacheBust; ?>"></script>
<link rel="stylesheet" type="text/css" href="/css/layout.css?v=<?= $this->cacheBust; ?>">

Quá trình xuất bản của chúng tôi tạo ra một tệp có số sửa đổi của bản dựng hiện tại. Điều này hoạt động bằng cách mã hóa URL tệp đó và sử dụng nó như một bộ đệm bộ đệm. Khi không thành công, nếu tệp đó không tồn tại, số năm và tuần được sử dụng để bộ đệm vẫn hoạt động và nó sẽ được làm mới ít nhất một lần một tuần.

Ngoài ra, điều này cung cấp khả năng xóa bộ đệm cho mỗi lần tải trang trong khi ở môi trường phát triển để các nhà phát triển không phải lo lắng về việc xóa bộ đệm cho bất kỳ tài nguyên nào (javascript, css, ajax cuộc gọi, v.v.).

hoặc bạn chỉ có thể đọc tệp js bằng máy chủ với file_get_contets và sau đó đặt echo trong tiêu đề nội dung js

Có lẽ "xóa bộ nhớ cache" không dễ như mong muốn. Thay vì xóa bộ nhớ cache trên trình duyệt của tôi, tôi nhận ra rằng việc "chạm" vào tệp sẽ thực sự thay đổi ngày của tệp nguồn được lưu trong máy chủ (Đã kiểm tra trên Edge, Chrome và Firefox) và hầu hết các trình duyệt sẽ tự động tải xuống bản sao mới nhất của whats trên máy chủ của bạn (mã, đồ họa bất kỳ đa phương tiện quá). Tôi khuyên bạn chỉ nên sao chép các tập lệnh mới nhất trên máy chủ và giải pháp "thực hiện cảm ứng" trước khi chương trình của bạn chạy, vì vậy nó sẽ thay đổi ngày của tất cả các tệp vấn đề của bạn thành ngày và giờ mới nhất, sau đó nó tải xuống một bản sao mới vào trình duyệt của bạn:

<?php
    touch('/www/control/file1.js');
    touch('/www/control/file2.js');
    touch('/www/control/file2.js');
?>

... phần còn lại của chương trình của bạn ...

Tôi phải mất một thời gian để giải quyết vấn đề này (vì nhiều trình duyệt hoạt động khác nhau với các lệnh khác nhau, nhưng tất cả đều kiểm tra thời gian của tệp và so sánh với bản sao đã tải xuống trong trình duyệt của bạn, nếu ngày và giờ khác nhau, sẽ làm mới), Nếu bạn Không thể đi đúng hướng, luôn có một giải pháp hữu ích và tốt hơn cho nó. Trân trọng và cắm trại vui vẻ.

Tôi đã có một số rắc rối với mã được đề xuất bởi yboussard. Vòng lặp j bên trong không hoạt động. Đây là mã sửa đổi mà tôi sử dụng thành công.

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}

Nếu bạn đang sử dụng php có thể làm:

 <script src="js/myscript.js?rev=<?php echo time();?>"
    type="text/javascript"></script>

Cache.delete () có thể được sử dụng cho chrome, firefox và opera mới.

Xin vui lòng không cung cấp thông tin không chính xác. Api bộ đệm là một loại bộ đệm khác nhau từ bộ đệm http

Bộ đệm HTTP được kích hoạt khi máy chủ gửi các tiêu đề chính xác , bạn không thể truy cập bằng javasvipt.

Mặt khác, api bộ nhớ cache được kích hoạt khi bạn muốn, nó hữu ích khi làm việc với nhân viên dịch vụ để bạn có thể giao cắt yêu cầu và trả lời nó từ loại bộ đệm này xem: ilustration 1 ilustration 2 khóa học

Bạn có thể sử dụng những đồ công nghệ này để luôn có một nội dung mới trên người dùng của bạn:

1. Sử dụng location.reload (đúng) điều này không hiệu quả với tôi, vì vậy tôi sẽ không giới thiệu nó.
2. Sử dụng api Cache để lưu vào bộ đệm và giao yêu cầu với nhân viên dịch vụ , hãy cẩn thận với cái này vì nếu máy chủ đã gửi tiêu đề bộ đệm cho các tệp bạn muốn làm mới, trước tiên trình duyệt sẽ trả lời từ bộ đệm HTTP, và nếu nó không tìm thấy nó, thì nó sẽ vào mạng, vì vậy bạn có thể kết thúc với và tập tin cũ
3. Thay đổi url từ các tệp stactics của bạn, tôi khuyên bạn nên đặt tên cho nó bằng cách thay đổi nội dung tệp của bạn, tôi sử dụng md5 và sau đó chuyển đổi nó thành chuỗi và url thân thiện, và md5 sẽ thay đổi theo nội dung của tệp, ở đó bạn có thể tự do gửi tiêu đề bộ đệm HTTP đủ lâu

Tôi sẽ giới thiệu người thứ ba xem

Bạn cũng có thể vô hiệu hóa bộ nhớ đệm trình duyệt với các thẻ meta HTML, chỉ cần đặt các thẻ html vào phần đầu để tránh trang web bị lưu trong khi bạn đang mã hóa / kiểm tra và khi hoàn tất, bạn có thể xóa các thẻ meta.

(trong phần đầu)

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0"/>

Làm mới trang của bạn sau khi dán phần này vào đầu và cũng nên làm mới mã javascript mới.

Liên kết này sẽ cung cấp cho bạn các tùy chọn khác nếu bạn cần chúng http://cristian.sulea.net/blog/disable-browser-caching-with-meta-html-tags/

hoặc bạn chỉ có thể tạo một nút như vậy

<button type="button" onclick="location.reload(true)">Refresh</button>

nó làm mới và tránh bộ nhớ đệm nhưng nó sẽ ở đó trên trang của bạn cho đến khi bạn hoàn thành kiểm tra, sau đó bạn có thể gỡ nó ra. Tùy chọn nắm tay là điều tốt nhất tôi điều.

Tôi có xu hướng phiên bản khung của mình sau đó áp dụng số phiên bản cho đường dẫn kịch bản và kiểu

<cfset fw.version = '001' />
<script src="/scripts/#fw.version#/foo.js"/>

window.parent.caches.delete("call")

đóng và mở trình duyệt sau khi thực thi mã trong bàn điều khiển.

window.location.reload(true)dường như đã bị phản đối bởi tiêu chuẩn HTML5. Một cách để làm điều này mà không cần sử dụng chuỗi truy vấn là sử dụng Clear-Site-Datatiêu đề , dường như được chuẩn hóa .

Nguyên nhân khiến bộ đệm của trình duyệt cùng một liên kết, bạn nên thêm một số cuối ngẫu nhiên của url. new Date().getTime()tạo ra một số khác nhau

Chỉ cần thêm new Date().getTime()kết thúc của liên kết như cuộc gọi

'https://stackoverflow.com/questions.php?' + new Date().getTime()

Đầu ra: https://stackoverflow.com/questions.php?1571737901173