Home / Tài liệu CNTT / CSS-CSS3 / Tự động làm mới cache CSS và JS của Web trong trình duyệt

Tự động làm mới cache CSS và JS của Web trong trình duyệt

Bạn chỉnh sửa lại Css và Javascript cho web nhưng trình duyệt chrome, firefox, ie, coccoc… của bạn vẫn lưu cache file css, js cũ khiến web của bạn không thay đổi. Điều đó dẫn đến việc những người dùng đã truy cập web của bạn trước đó sẽ không được hiển thị phiên bản web mới nhât. Vậy làm sao để trình duyệt tự động nạp css, js mới nhất?

Dưới đây là giải pháp cho bạn

Cách 1: Giải pháp chung: Chỉ xóa Cache trên trình duyệt của bạn

Nhấn CtrlF5(hoặc CtrlShiftR) để buộc tải lại bộ nhớ cache. Tôi tin rằng máy Mac sử dụng CmdShiftR.

Cách 2: Với PHP

Trong PHP, bạn có thể tắt bộ nhớ cache bằng cách đặt ngày hết hạn thành một thời điểm trong quá khứ với tiêu đề:

Cách 3:

Nếu web viết bằng php, bạn có thể viết

Việc sử dụng hàm mt_rand() với mục đích là tạo Random một số nguyên ngoài ra bạn có thể sử dụng các hàm rand() thay thế nếu thích

  • rand(): sẽ cho ra một số nguyên ngẫu nhiên, giá trị lớn nhất có thể là 32767 (còn gọi là  getrandmax);
  • mt_rand(): sẽ cho ra số nguyên ngẫu nhiên, giá trị lớn nhất có thể là 2147483647 (còn gọi là mt_getrandmax);

Nó sẽ luôn làm mới!

Cách 4:

Giải pháp này được viết bằng PHP, nhưng nó phải dễ dàng điều chỉnh sang các ngôn ngữ khác.

Bản .htaccessregex ban đầu có thể gây ra sự cố với các tệp như json-1.3.js. Giải pháp là chỉ viết lại nếu có đúng 10 chữ số ở cuối. (Vì 10 chữ số bao gồm tất cả các dấu thời gian từ 9/9/2001 đến 20/11/2286.)

Đầu tiên, chúng tôi sử dụng quy tắc viết lại sau trong .htaccess:

Bây giờ, chúng ta viết hàm PHP sau:

Bây giờ, bất cứ nơi nào bạn bao gồm CSS của mình, hãy thay đổi nó từ sau:

Về điều này:

Bằng cách này, bạn không bao giờ phải sửa đổi lại thẻ liên kết và người dùng sẽ luôn thấy CSS mới nhất. Trình duyệt sẽ có thể lưu vào bộ nhớ cache tệp CSS, nhưng khi bạn thực hiện bất kỳ thay đổi nào đối với CSS của mình, trình duyệt sẽ xem đây là một URL mới, vì vậy nó sẽ không sử dụng bản sao đã lưu trong bộ nhớ cache.

Điều này cũng có thể hoạt động với hình ảnh, biểu tượng yêu thích và JavaScript. Về cơ bản là bất kỳ thứ gì không được tạo động.