Làm cách nào để làm trống bộ nhớ cache của trình duyệt theo chương trình?

Tôi đang tìm cách làm trống bộ nhớ cache của trình duyệt theo chương trình. Tôi thực hiện việc này vì ứng dụng lưu trữ dữ liệu bí mật và tôi muốn xóa những dữ liệu đó khi bạn nhấn "đăng xuất". Điều này sẽ xảy ra thông qua máy chủ hoặc JavaScript. Tất nhiên, việc sử dụng phần mềm trên máy tính công cộng / nước ngoài vẫn không được khuyến khích vì có nhiều nguy hiểm hơn như key logger mà bạn không thể đánh bại ở cấp độ phần mềm.

Có thể, bạn chỉ cần sử dụng jQuery để thay thế 'thẻ meta' tham chiếu trạng thái bộ nhớ cache bằng một nút / trình xử lý sự kiện, sau đó làm mới, dễ dàng,

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

LƯU Ý: Giải pháp này dựa trên Bộ đệm ứng dụng được triển khai như một phần của thông số kỹ thuật HTML 5. Nó cũng yêu cầu cấu hình máy chủ để thiết lập tệp kê khai Bộ nhớ đệm ứng dụng. Nó không mô tả một phương pháp mà người ta có thể xóa bộ nhớ cache của trình duyệt 'truyền thống' thông qua mã phía máy khách hoặc phía máy chủ, điều này là không thể thực hiện được.

Không có cách nào trình duyệt cho phép bạn xóa bộ nhớ cache của nó. Nó sẽ là một vấn đề bảo mật lớn nếu điều đó có thể. Điều này có thể rất dễ bị lạm dụng - phút mà trình duyệt hỗ trợ một "tính năng" như vậy sẽ là phút tôi gỡ cài đặt nó khỏi máy tính của mình.

Những gì bạn có thể làm là yêu cầu nó không lưu vào bộ nhớ cache trang của bạn, bằng cách gửi các tiêu đề thích hợp hoặc sử dụng các thẻ meta sau:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Bạn cũng có thể muốn xem xét việc tắt tính năng tự động hoàn thành trên các trường biểu mẫu, mặc dù tôi e rằng có một cách tiêu chuẩn để làm điều đó ( xem câu hỏi này ).

Bất kể, tôi muốn chỉ ra rằng nếu bạn đang làm việc với dữ liệu nhạy cảm, bạn nên sử dụng SSL. Nếu bạn không sử dụng SSL, bất kỳ ai có quyền truy cập vào mạng đều có thể đánh giá lưu lượng truy cập mạng và dễ dàng xem những gì người dùng của bạn đang nhìn thấy.

Việc sử dụng SSL cũng khiến một số trình duyệt không sử dụng bộ nhớ đệm trừ khi được yêu cầu rõ ràng. Xem câu hỏi này .

sử dụng chính html Có một thủ thuật có thể được sử dụng, đó là thêm một tham số / chuỗi vào tên tệp trong thẻ script và thay đổi nó khi bạn thay đổi tệp.

<script src="myfile.js?version=1.0.0"></script>

Trình duyệt diễn giải toàn bộ chuỗi là đường dẫn tệp mặc dù những gì đứng sau dấu "?" là các tham số. Vì vậy, điều xảy ra bây giờ là lần tới khi bạn cập nhật tệp của mình, chỉ cần thay đổi số trong thẻ script trên trang web của bạn (Ví dụ <script src="myfile.js?version=1.0.1"></script>) và mỗi trình duyệt của người dùng sẽ thấy tệp đã thay đổi và lấy một bản sao mới.

Ý tưởng tốt nhất là tạo tệp js với tên + một số hàm băm với phiên bản, nếu bạn cần xóa bộ nhớ cache, chỉ cần tạo tệp mới với hàm băm mới, điều này sẽ kích hoạt trình duyệt tải tệp mới

Ban đầu, tôi đã thử các cách tiếp cận có lập trình khác nhau trong html, JS của mình để xóa bộ nhớ cache của trình duyệt. Không có gì hoạt động trên Chrome mới nhất.

Cuối cùng, tôi đã kết thúc với .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Đã thử nghiệm trong Chrome, Firefox, Opera

Tham khảo: https://wp-mix.com/disable-caching-htaccess/

location.reload (true); sẽ khó tải lại trang hiện tại, bỏ qua bộ nhớ cache.
Cache.delete () cũng có thể được sử dụng cho chrome, firefox và opera mới.

Trên Chrome, bạn có thể thực hiện việc này bằng cách sử dụng tiện ích mở rộng điểm chuẩn. Bạn cần khởi động chrome của mình bằng các công tắc sau:

./chrome --enable-benchmarking --enable-net-benchmarking 

Trong bảng điều khiển của Chrome bây giờ, bạn có thể làm như sau:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Như bạn có thể thấy từ các lệnh trên, nó không chỉ xóa bộ nhớ cache của trình duyệt mà còn xóa bộ nhớ cache DNS và đóng các kết nối mạng. Đây là những điều tuyệt vời khi bạn thực hiện đo điểm chuẩn thời gian tải trang. Rõ ràng là bạn không phải sử dụng tất cả chúng nếu không cần thiết (ví dụ: clearCache () là đủ nếu bạn chỉ cần xóa bộ nhớ cache và không quan tâm đến bộ nhớ cache và kết nối DNS).

Bây giờ bạn có thể sử dụng Cache.delete ()

Thí dụ:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Hoạt động trên Chrome 40+, Firefox 39+, Opera 27+ và Edge.

Hãy tưởng tượng các .jstệp được đặt trong/my-site/some/path/ui/js/myfile.js

Vì vậy, thông thường thẻ script sẽ giống như sau:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Bây giờ thay đổi điều đó thành:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Bây giờ tất nhiên điều đó sẽ không hoạt động. Để làm cho nó hoạt động, bạn cần thêm một hoặc một vài dòng vào .htaccess Dòng quan trọng là: (toàn bộ .htaccess ở dưới cùng)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Vì vậy, điều này làm là, nó loại bỏ 1111111111 đường dẫn khỏi đường dẫn và liên kết đến đường dẫn chính xác.

Vì vậy, bây giờ nếu bạn thực hiện thay đổi, bạn chỉ cần thay đổi số 1111111111thành bất kỳ số nào bạn muốn. Và tuy nhiên bạn bao gồm các tệp của mình, bạn có thể đặt số đó thông qua dấu thời gian khi tệp js được sửa đổi lần cuối. Vì vậy bộ nhớ đệm sẽ hoạt động bình thường nếu số lượng không thay đổi. Nếu nó thay đổi, nó sẽ phân phát tệp mới (CÓ LUÔN) vì trình duyệt nhận được một URL mới hoàn chỉnh và chỉ cần tin rằng tệp đó là mới nên anh ta phải đi lấy nó.

Bạn có thể sử dụng cho CSS, faviconsvà những gì từng được lưu trữ. Đối với CSS chỉ cần sử dụng như vậy

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

Và nó sẽ hoạt động! Đơn giản để cập nhật, đơn giản để bảo trì.

.Htaccess đầy đủ đã hứa

Nếu bạn chưa có .htaccess thì đây là số tiền tối thiểu bạn cần có:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>