วิธีการล้างแคชเบราว์เซอร์โดยทางโปรแกรม

121

ฉันกำลังมองหาวิธีล้างแคชของเบราว์เซอร์โดยใช้โปรแกรม ฉันทำเช่นนี้เนื่องจากแอปพลิเคชันแคชข้อมูลที่เป็นความลับและฉันต้องการลบข้อมูลเหล่านั้นออกเมื่อคุณกด "ออกจากระบบ" สิ่งนี้จะเกิดขึ้นผ่านเซิร์ฟเวอร์หรือ JavaScript แน่นอนว่าการใช้ซอฟต์แวร์บนคอมพิวเตอร์ต่างประเทศ / คอมพิวเตอร์สาธารณะยังคงไม่ได้รับการสนับสนุนเนื่องจากมีอันตรายมากขึ้นเช่นตัวบันทึกคีย์ที่คุณไม่สามารถเอาชนะในระดับซอฟต์แวร์ได้

— หอคอย
แหล่งที่มา

3

เบราว์เซอร์ใด คุณควรดูที่การบอกเบราว์เซอร์ว่าห้ามแคชจากเซิร์ฟเวอร์เทียบกับการพยายามลบมัน

— Mech Software

คุณอาจต้องการดูบทช่วยสอนเกี่ยวกับการแคชและวิธีการทำงาน mnot.net/cache_docsครอบคลุมส่วนหัวการควบคุมแคชและสิ่งต่างๆเช่นนั้น

— scrappedcola

@MechSoftware ฉันต้องการแคชเพื่อให้โหลดหน้าได้เร็วขึ้น แต่ฉันต้องการล้างมันหลังจากออกจากระบบ ควรสนับสนุนเบราว์เซอร์ที่ดีที่สุดเท่าที่จะทำได้

— ทาวเวอร์

2

@rFactor ไม่มีใครใช้เบราว์เซอร์ที่ช่วยให้เว็บไซต์สามารถควบคุมแคชได้

— NullUserException

3

เว็บไซต์โดยพฤตินัยสามารถควบคุมแคชได้เนื่องจากควบคุมส่วนหัว HTTP

— Danubian Sailor

38

เป็นไปได้คุณสามารถใช้ jQuery เพื่อแทนที่ 'เมตาแท็ก' ที่อ้างอิงสถานะแคชด้วยตัวจัดการเหตุการณ์ / ปุ่มจากนั้นรีเฟรชง่าย ๆ

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

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

หมายเหตุ: โซลูชันนี้อาศัย Application Cache ที่ใช้งานเป็นส่วนหนึ่งของข้อมูลจำเพาะ HTML 5 นอกจากนี้ยังต้องมีการกำหนดค่าเซิร์ฟเวอร์เพื่อตั้งค่ารายการแคชของแอป ไม่ได้อธิบายถึงวิธีการที่เราสามารถล้างแคชของเบราว์เซอร์ 'ดั้งเดิม' ผ่านทางไคลเอนต์หรือโค้ดฝั่งเซิร์ฟเวอร์ซึ่งเป็นไปไม่ได้ที่จะทำ

— Zeal Murapa
แหล่งที่มา

นี่เป็นเพียงคุณลักษณะ HTML5 หรือไม่

— John Naegle

ฉันจะพูดอย่างนั้นและฉันเชื่อว่ามันต้องมีการกำหนดค่าเซิร์ฟเวอร์ด้วย (เพื่อตั้งค่ารายการแคชของแอป) แม้ว่าคำตอบนี้จะเสนอวิธีแก้ปัญหาสำหรับคำถามเดิม แต่ก็ปิดบังความจริงที่ว่าแทบจะเป็นไปไม่ได้เลยที่จะล้างแคชของเบราว์เซอร์แบบเดิมผ่านรหัสฝั่งไคลเอ็นต์หรือเซิร์ฟเวอร์

— Eric Fuller

วิธีนี้ดูเหมือนว่าจะข้ามแคชและอัปเดตเนื้อหา แต่เมื่อโหลดหน้าซ้ำระบบจะกลับไปที่เนื้อหาที่แคชไว้ก่อนหน้านี้

— ง่ายกว่า

เลิกสนับสนุนผู้พัฒนา

— mozilla.org/en-US/docs/Web/HTML/…

2

พนักงานบริการไม่ทำงานบน iPhone เพื่อให้คุณมีการใช้แคชของแอปมี

— tony

159

มีไม่มีทางเบราว์เซอร์จะช่วยให้คุณล้างแคช มันจะเป็นปัญหาด้านความปลอดภัยอย่างมากหากเป็นไปได้ สิ่งนี้อาจถูกละเมิดได้ง่ายมาก - นาทีที่เบราว์เซอร์รองรับ "คุณลักษณะ" ดังกล่าวจะเป็นนาทีที่ฉันถอนการติดตั้งจากคอมพิวเตอร์ของฉัน

สิ่งที่คุณสามารถทำได้คือการบอกว่าจะไม่แคชหน้าเว็บของคุณโดยการส่งส่วนหัวที่เหมาะสมหรือใช้แท็ก meta เหล่านี้:

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

คุณอาจต้องการปิดการกรอกข้อมูลอัตโนมัติในช่องแบบฟอร์มแม้ว่าฉันจะกลัวว่าจะมีวิธีมาตรฐานในการดำเนินการก็ตาม ( ดูคำถามนี้ )

ไม่ว่าฉันอยากจะชี้ให้เห็นว่าหากคุณกำลังทำงานกับข้อมูลที่ละเอียดอ่อนคุณควรใช้ SSL หากคุณไม่ได้ใช้ SSL ทุกคนที่มีสิทธิ์เข้าถึงเครือข่ายสามารถดักจับปริมาณการใช้งานเครือข่ายและดูสิ่งที่ผู้ใช้ของคุณเห็นได้อย่างง่ายดาย

การใช้ SSL ยังทำให้เบราว์เซอร์บางตัวไม่ใช้การแคชเว้นแต่จะแจ้งให้ทราบอย่างชัดเจน ดูคำถามนี้

— NullUserException
แหล่งที่มา

8

เหตุใดฉันจึงต้องล้างแคชของเว็บแอปเพื่อรบกวนผู้ใช้ของฉัน ฉันต้องการทำเช่นนั้นเพื่อล้างร่องรอยของข้อมูลส่วนตัวที่แคชไว้ ถ้าฉันบอกไม่ให้เบราว์เซอร์แคชเบราว์เซอร์จะต้องขอข้อมูลฝั่งไคลเอ็นต์เป็นเมกะไบต์ทุกครั้งที่โหลดหน้าเว็บซึ่งไม่ต้องการให้ฉันทำ

— ทาวเวอร์

27

ไม่มีใครยอมเพราะเห็นได้ชัดว่ามันเป็นไปไม่ได้ เช่นเดียวกับที่คุณไม่สามารถเรียกใช้สคริปต์ในจุดเริ่มต้นอื่นไม่ได้หมายความว่าคุณไม่สามารถเรียกใช้สคริปต์ในต้นทางของคุณได้ หากคุณไม่สามารถล้างแคชในแหล่งกำเนิดระยะไกลนั่นเป็นเหตุผล แต่ทำไมฉันไม่สามารถล้างแคชของต้นทางที่ฉันเรียกใช้รหัสได้ ไม่มีเหตุผลที่จะไม่ทำดังนั้นฉันกำลังมองหาวิธีแก้ปัญหานั้นหรือไม่ แต่ดูเหมือนว่าจะเป็นไปไม่ได้ หากคุณอยากรู้อยากเห็นฉันบอกได้เลยว่าฉันมีแอปพลิเคชั่นขนาดใหญ่ที่มี CSS, HTML และ JS จำนวนมากที่คอมไพล์ได้ประมาณ 6 MB

— ทาวเวอร์

4

@rFactor นั่นมันมากเกินไป

— NullUserException

14

โปรดอธิบายว่าไม่ว่าจะใช้งานอย่างไรนี่จะเป็นปัญหาด้านความปลอดภัยหรือไม่? สามารถดำเนินการได้อย่างปลอดภัย

— แดน

22

บางทีฉันอาจจะนอนไม่พอเมื่อคืนมันจะเป็นปัญหาด้านความปลอดภัยในทางใดเมื่อเว็บแอปสามารถล้างแคช( ไม่แก้ไข ) ได้ คุณจะใช้ประโยชน์จากสิ่งนั้นได้อย่างไร?

— Volker E.

19

ใช้ html เองมีเคล็ดลับอย่างหนึ่งที่สามารถใช้ได้เคล็ดลับคือการต่อท้ายพารามิเตอร์ / สตริงเข้ากับชื่อไฟล์ในแท็กสคริปต์และเปลี่ยนเมื่อคุณเปลี่ยนไฟล์

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

เบราว์เซอร์ตีความสตริงทั้งหมดเป็นเส้นทางของไฟล์แม้ว่าจะมีอะไรตามหลัง "?" ก็ตาม คือพารามิเตอร์ สิ่งที่เกิดขึ้นในตอนนี้ก็คือในครั้งต่อไปที่คุณอัปเดตไฟล์ของคุณเพียงแค่เปลี่ยนหมายเลขในแท็กสคริปต์บนเว็บไซต์ของคุณ (ตัวอย่าง<script src="myfile.js?version=1.0.1"></script>) และเบราว์เซอร์ของผู้ใช้แต่ละคนจะเห็นว่าไฟล์มีการเปลี่ยนแปลงและคว้าสำเนาใหม่

— Joish
แหล่งที่มา

1

สำหรับผู้ที่ใช้ภาษาไดนามิกฝั่งเซิร์ฟเวอร์หากคุณสามารถเข้าถึงไฟล์ctime(หรือmtime) คุณสามารถเพิ่มเวลาดังกล่าวไว้ข้างหลังได้ ตัวอย่างเช่นใน php myfile.js?v=<?=filectime('myfile.js');?>และที่นั่นคุณมีแคชอัปเดตอัตโนมัติสำหรับทรัพยากรของคุณ

— Pierre-Antoine Guillaume

ฉันใช้เทคนิคนี้มาหลายวันแล้ว แต่ฉันสังเกตว่าวันนี้ไฟล์ยังคงถูกแสดงผลจากแคชแม้ว่าฉันจะเปลี่ยนส่วนเวอร์ชันแล้วก็ตาม ฉันใช้ Chrome มันแสดงแม้ว่าฉันจะลบไฟล์ออกจากเซิร์ฟเวอร์แล้วก็ตาม ใครมีข้อมูลว่าทำไมมันถึงใช้ไม่ได้?

— TᴀʀᴇǫMᴀʜᴍᴏᴏᴅ

เคล็ดลับนี้ได้ผลstackoverflow.com/questions/1922910/…

— เนวิน

9

แนวคิดที่ดีที่สุดคือการสร้างไฟล์ js ด้วยชื่อ + แฮชบางเวอร์ชันหากคุณต้องการล้างแคชเพียงสร้างไฟล์ใหม่ด้วยแฮชใหม่สิ่งนี้จะทำให้เบราว์เซอร์โหลดไฟล์ใหม่

— แอดมินเป็ด
แหล่งที่มา

6

ตอนแรกฉันลองใช้วิธีการทางโปรแกรมต่างๆใน html, JS เพื่อล้างแคชของเบราว์เซอร์ ไม่มีอะไรทำงานบน Chrome รุ่นล่าสุด

สุดท้ายฉันลงเอยด้วย. 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>

ทดสอบใน Chrome, Firefox, Opera

อ้างอิง: https://wp-mix.com/disable-caching-htaccess/

— rajagopalx
แหล่งที่มา

1

นี่คือการแก้ไขที่ดีที่สุด

— เรือบรรทุกพญานาค

4

location.reload (จริง); จะโหลดหน้าปัจจุบันซ้ำอย่างหนักโดยไม่สนใจแคช นอกจากนี้ยังสามารถใช้
Cache.delete ()สำหรับ chrome, firefox และ opera ใหม่

— เจชาห์
แหล่งที่มา

ฟังก์ชันนี้ใช้ไม่ได้กับ Internet Explorer และเบราว์เซอร์ซาฟารี ไม่แน่ใจว่าทำงานกับ Microsoft Edge ได้หรือไม่

— Curious Developer

3

ใน Chrome คุณควรจะทำได้โดยใช้ส่วนขยายการเปรียบเทียบ คุณต้องเริ่ม Chrome ของคุณด้วยสวิตช์ต่อไปนี้:

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

ในคอนโซลของ Chrome ตอนนี้คุณสามารถทำสิ่งต่อไปนี้ได้:

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

ดังที่คุณสามารถบอกได้จากคำสั่งด้านบนไม่เพียง แต่ล้างแคชของเบราว์เซอร์เท่านั้น แต่ยังล้างแคช DNS และปิดการเชื่อมต่อเครือข่ายด้วย สิ่งเหล่านี้ดีมากเมื่อคุณทำการเปรียบเทียบเวลาในการโหลดหน้าเว็บ เห็นได้ชัดว่าคุณไม่จำเป็นต้องใช้มันทั้งหมดหากไม่จำเป็น (เช่น clearCache () ก็เพียงพอแล้วหากคุณต้องการล้างแคชเท่านั้นและไม่สนใจแคช DNS และการเชื่อมต่อ)

— kakhkAtion
แหล่งที่มา

2

//The code below should be put in the "js" folder with the name "clear-browser-cache.js"

(function () {
    var process_scripts = false;
    var rep = /.*\?.*/,
    links = document.getElementsByTagName('link'),
    scripts = document.getElementsByTagName('script');
    var value = document.getElementsByName('clear-browser-cache');
    for (var i = 0; i < value.length; i++) {
        var val = value[i],
            outerHTML = val.outerHTML;
        var check = /.*value="true".*/;
        if (check.test(outerHTML)) {
            process_scripts = true;
        }
    }
    for (var i = 0; i < links.length; i++) {
        var link = links[i],
        href = link.href;
        if (rep.test(href)) {
            link.href = href + '&' + Date.now();
        }
        else {
            link.href = href + '?' + Date.now();
        }
    }
    if (process_scripts) {
        for (var i = 0; i < scripts.length; i++) {
            var script = scripts[i],
            src = script.src;
            if (src !== "") {
                if (rep.test(src)) {
                    script.src = src + '&' + Date.now();
                }
                else {
                    script.src = src + '?' + Date.now();
                }
            }
        }
    }
})();

At the end of the tah head, place the line at the code below

    < script name="clear-browser-cache" src='js/clear-browser-cache.js' value="true" >< /script >

ขยายข้อมูลโค้ด

— haimirick
แหล่งที่มา

3

ยังไม่ชัดเจนว่าคำตอบนี้ทำงานอย่างไรและดีกว่าคำตอบที่มีอยู่มากมายอย่างไร สิ่งนี้สามารถปรับปรุงได้อย่างมากพร้อมคำอธิบายว่าคุณกำลังติดตามแนวทางใดตลอดจนเอกสารประกอบที่แสดงว่าเหตุใดจึงได้ผล

— Vlad274

แม้ว่าจะได้รับการชื่นชม แต่สิ่งนี้ไม่ได้ล้างแคชของเบราว์เซอร์ แต่ดูเหมือนว่าจะแคชลิงก์ใด ๆ บนหน้าเว็บที่ระบุเพียงแค่เพิ่มพารามิเตอร์

— Dan Chase

1

ตอนนี้คุณสามารถใช้Cache.delete ()

ตัวอย่าง:

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)
    }
  }));

ทำงานบน Chrome 40+, Firefox 39+, Opera 27+ และ Edge

— r.delic
แหล่งที่มา

0

ลองนึกภาพ.jsไฟล์ที่วางอยู่ใน/my-site/some/path/ui/js/myfile.js

โดยปกติแท็กสคริปต์จะมีลักษณะดังนี้:

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

ตอนนี้เปลี่ยนเป็น:

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

ตอนนี้แน่นอนว่าจะไม่ทำงาน เพื่อให้ใช้งานได้คุณต้องเพิ่มหนึ่งหรือสองสามบรรทัดในบรรทัดที่.htaccess สำคัญคือ: (.htaccess ทั้งหมดที่ด้านล่าง)

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

สิ่งนี้คืออะไรมันเป็นการลบออก1111111111จากเส้นทางและเชื่อมโยงไปยังเส้นทางที่ถูกต้อง

ดังนั้นตอนนี้หากคุณทำการเปลี่ยนแปลงคุณก็ต้องเปลี่ยนตัวเลข1111111111เป็นตัวเลขที่คุณต้องการ อย่างไรก็ตามคุณรวมไฟล์ของคุณคุณสามารถตั้งค่าหมายเลขนั้นผ่านการประทับเวลาเมื่อไฟล์ js ได้รับการแก้ไขครั้งล่าสุด ดังนั้นแคชจะทำงานได้ตามปกติหากตัวเลขไม่เปลี่ยนแปลง หากมีการเปลี่ยนแปลงจะแสดงไฟล์ใหม่ (ใช่เสมอ) เนื่องจากเบราว์เซอร์ได้รับ URL ใหม่ที่สมบูรณ์และเพิ่งเชื่อว่าไฟล์นั้นใหม่ดังนั้นเขาจึงต้องไปรับ

คุณสามารถใช้สำหรับCSS, faviconsและสิ่งที่เคยได้รับที่เก็บไว้ชั่วคราว สำหรับ CSS ให้ใช้เช่นนั้น

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

และจะได้ผล! ง่ายต่อการอัปเดตดูแลรักษาง่าย

. htaccess เต็มสัญญา

หากคุณยังไม่มี. htaccess นี่คือขั้นต่ำที่คุณต้องมี:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

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

— Caramba
แหล่งที่มา