My website is hosted by blue host.
Whenever I modify/add text in the HTML and I refresh my webpage, the change would be reflected.
However, when I update the css file, i must clear my chrome brower cache in order to reflect the change.
This is painful as I need to constantly clear my cache. Sometimes tweaking format takes several such clearing.
Is there any way i could avoid clearing the cache but still reflect the css related changes?
You have three options:
-reload the page with cntr+shft+R
-add a dummy Parameter to your css file which you change when you need to refresh the css. E.g. .../yourpath/css.css?v=1
(In case you can use scripts such as PHP, you can use a random value for this parameter which will automatically force the css-reloading on each page refresh)
-open the developer console (F12) and disable the cache on the network tab.
Related
I've tried several methods, especially all listed here:
Button that refreshes the page on click
Force page reload with html anchors (#) - HTML & JS
...but they all seem to only trigger a reload using local cache.
Is there any way to trigger a forced reload, bypassing any cache (especially for images) via an HTML button?
Alternatively, is there a line of HTML code that would force the page to not use cache at all?
The page is a simple static html page that changes a few times a day.
There is no HTML-only way to do it.
You could try using window.location.reload(true) which will try to reload the current page and ignore cache files on some browsers. But this is not part of the specification and won't work on most browser (https://developer.mozilla.org/en-US/docs/Web/API/Location/reload)
The real way to make it is to version your filenames ! There are many tools to do it quite easily. When the page will refresh, as the name will have changed, your browser is going to load the new file and you won't have cache problem anymore
I'm pretty sure it's not possible to force reload (+ clear cache) in HTML itself.
One solution is to make a button and give that a JS function, in which both the cache is cleared and the page reloaded.
function reloadClear() {
window.localStorage.clear();
window.location.reload(true);
return false;
}
just remove localstorage saved files use window.localstorage.remove('name of the item you saved')
or if you didnt what all of them just use window.localstorage.clear() then reload it with window.location.reload(true)
I run a website for a small company. The websites mostly contains text and images. Whenever i update the website by replacing a image or updating the css, it doesn't get updated on other people's browsers because it's been cached. I've found a way to get around this by adding a version number where i'm linking my stylesheet, however, this doesn't apply to images. What is the most simple way to get around this?
I've done a lot of research on the web and on stackoverflow, but they are all complicated solutions. There must be a better way.
Just to be clear, i know i can clear the cache in my browser. I'm looking for a solution that works for everyone who access my website.
You can add these meta tags and it will force a page to reload from the server on every reload. However, you should realize that this could result in a lot more data usage for both you and your users.
<meta http-equiv=“Pragma” content=”no-cache”>
<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv=“CACHE-CONTROL” content=”NO-CACHE”>
If you have a reload link or button on your html page, you can add this attribute to it to force a reload from the server. The 'true' parameter is what forces a full reload instead of a cache reload.
onClick="location.reload(true);"
You can rename your images (preferably) automatically when you want to avoid them being cached, adding a version number to their name. If you have something which does this automatically, then you bypass the problem of caching them.
If you want to keep the name of your images, then you can make the change only temporary.
Try versioning(?version) to the files to avoid browser caching.
it will be like filename.jpg?v1 filename.jpg?v2
Or if you are replacing files frequently try adding current timestamp for every page load
In php,
filename.jpg?<?= time()?>"
where time() is current timestamp
This means you are just changing the urls everytime.
When I try and change my current CSS or add new CSS to my style-sheet no change shows up (tags are still being styled by the old unchanged code).
For example, if I delete the contents of a class and I go into chrome debug tool using F12, I can see that the contents which I deleted are still showing up - even if I clear the cache by pressing Ctrl+Shift+R, OR by pressing Ctrl+F5!
All the other files of my website seem to be updating correctly, so if I use inline styles it will update correctly.
Strangely when I go into my websites control panel and manually download the CSS style-sheet from my server I can see that the code has indeed being updated with the new code, this is weird because upon inspecting it with F12, I can still see the old code with no changes.
I am using Microsoft Webmatrix to do my coding.
I am using the Chrome Web browser.
I am using Hostgator hosting.
I've exhausted all my trouble shooting options and have been beat by something that by all means should not occur. I think I've had a problem like this before and I think that it was solved by just waiting a day for whatever magic to work but I shouldn't have to wait. A problem like this is absolutely unacceptable in a live environment. Any ideas of what could be causing this?
FIXED!
changed: https://example.com/app/source/css/main.css
to this: https://example.com/app/source/css/main.css?v=1
You could try ctrl + shift + r (on a PC) to hard reset the browser and make sure the cache isn't displaying old CSS.
One thing is to verify you are editing the correct file. I managed to have that issue one time when I had two files named the same, but one was outside the folder with the index.html and that was the one I was editing.
Add ?v=1 behind the URL of the CSS link in the head, which will force using a non-cached version, because of the different (new) file name. The number should be unique, so if you want to use this in the future, make sure to replace the 1.
My web application makes changes to the CSS dynamically with Javascript, in response to user input. When the user navigates away from the updated page, then hits BACK, it reloads the page from the disk cache but the CSS changes are gone. So the page looks like it did before the user input.
Is this normal? Is there a way to get Chrome to cache the updated HTML that includes my CSS changes?
This is not related with Chrome. If CSS rule is changed by end user input (with JavaScript CSS operation) and nothing else is done, these CSS rule update (the latest CSS rules) is stored in browser memory, which is cleaned when page refreshes.
To make these updated-CSS "cached", you need to make it persistent by store it in LocalStorage (browser side) or Database in server.
If I have changed a CSS rule via javascript, do I need to do anything to "refresh" the browser to redisplay the current page using the updated rules?
No--a refresh isn't necessary--and if it did occur it would restore the document to its original state.
The change should take place immediately (setting display: none, for example). Use FireFox plugin FireBug (http://getfirebug.com/) or the IE Developer Toolbar (built into IE8 and available as a free plugin for previous versions) to dynamically view the HTML to ensure the change you think is taking place is actually occurring.
Changing CSS properties on the fly via JavaScript should automatically make the change in the user's web browser unless there is something wrong with your script of if the user has JavaScript turned off.