Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Javascript Prevent Caching technique
New Posts  All Forums:Forum Nav:

Javascript Prevent Caching technique

post #1 of 7
Thread Starter 
I wanted to prevent caching on my webpage while i am constantly making changes right now. When I get everything flushed out, i will probably end up removing this. I know this works, but I'm not sure this is the right way to do it, or if this is just bad practice.
Code:
<script type="text/javascript">
        //Loading like this to prevet caching issues. When the page loads, it will ensure that it gets a new JS file.
        var JSList =[ "src/LIB/BaseLibrary.js",
                        "src/LIB/Graphics.js",
                        "src/LIB/Layers.js",
                        "src/LIB/PopupTemplates.js",
                        "src/LIB/RequireAll.js"         
                    ]
        var dateString = Date.now();

        for (var i = 0; i <JSList.length; i++)
        {
            var js = document.createElement("script");
            js.type = "text/javascript";
            js.src = JSList[i] + "?" + dateString;
            document.head.appendChild(js);
        }
        
    </script>
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
post #2 of 7
There's nothing wrong with the method you're using. By appending a unique value to the end of the URL (the date string after the ? in the URL) you guarantee that the browser or script will pull a unique version of the page. I do it all the time, but instead of a date string I append a random integer between 1 and 10000. Same net result.

The only other way to do it would be to put some "pragma no-cache" or "expires" statements in the HTML section, but it's much less reliable. Some caching proxy servers or browser versions might ignore those statements completely. The first method is fool-proof.

Greg
post #3 of 7
Thread Starter 
Yeah, but then i ran into a problem where this does not work in IE8. I'm not sure if this is order of operations or what.

I can just list them out normally and do something like ?v=1.0 , but i cant randomly generate it, nor can i use a variable.
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
Zev's Comp
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i5-2500K Sandy Bridge 3.3GHz GIGABYTE GA-Z68X-UD3H-B3 LGA 1155 Intel Z68 HDM... GeForce GTX 750 Ti G.SKILL Ripjaws X Series 8GB 
Hard DriveHard DriveHard DrivePower
1TB HDD 64GB SSD (Used for SRT) 500 GB. Antec BP550 Plus 550W Continuous Power ATX12V V... 
Case
COOLER MASTER ELITE 335 RC-335-KKN1-GP Black S... 
  hide details  
Reply
post #4 of 7
IE 8 and older don't support the document.head property. Use this instead:
Code:
document.getElementsByTagName('head')[0].appendChild(js);
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
post #5 of 7
Usually it's best to define your caching rules in the HTTP headers (eg Apache). However your method would still work
post #6 of 7
Usually if I go down the route of random query string values to avoid caching I do it before sending the response to the client in the first place. It's not the nicest method for production but it's the simpler option for development purposes.
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
i7 920 D0 MSI X58 Pro-E GTX 560 Ti 448 3x2GB G.Skill DDR3-1333 9-9-9-24 
Hard DriveHard DriveOptical DriveOS
840 Pro Caviar Black LG BD-ROM Windows 8.1 Pro x64 
MonitorMonitorKeyboardPower
Dell U2713HM Dell U2311H Turbo-Trak (Google it :D) Corsair HX-520 
CaseMouseMouse PadAudio
CM690 Mionix Avior 7000 Everglide Titan AKG K 242 HD 
  hide details  
Reply
post #7 of 7
Why not use an .htaccess?
Code:
<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</FilesMatch>
Gaming 2016
(17 items)
 
  
CPUMotherboardGraphicsRAM
Intel i7 6700K Gigabyte Z170M-D3H MSI GTX1070 8G ARMOR Kingston HyperX FURY DDR4 
Hard DriveHard DriveHard DriveCooling
Samsung 840 Evo Samsung 850 Evo Seagate SHHD Cooler Master Nepton 240M 
OSMonitorKeyboardPower
Windows 10 Pro XB321HK Logitech 710 Corsair RM550x 
CaseMouseMouse PadAudio
Cooler Master Silencio 352 Logitech G500 Razer Goliathus Presonus Eris 4.5 
  hide details  
Reply
Gaming 2016
(17 items)
 
  
CPUMotherboardGraphicsRAM
Intel i7 6700K Gigabyte Z170M-D3H MSI GTX1070 8G ARMOR Kingston HyperX FURY DDR4 
Hard DriveHard DriveHard DriveCooling
Samsung 840 Evo Samsung 850 Evo Seagate SHHD Cooler Master Nepton 240M 
OSMonitorKeyboardPower
Windows 10 Pro XB321HK Logitech 710 Corsair RM550x 
CaseMouseMouse PadAudio
Cooler Master Silencio 352 Logitech G500 Razer Goliathus Presonus Eris 4.5 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Javascript Prevent Caching technique