How To Control Browser Cache And Cookies With HTML?

Control browser caching and cookies with HTML
Caching and cookies are two methods browsers employ to save data regarding a certain website. Caching is used to store some web page data locally for faster loading on each subsequent revisit, whereas cookies are small pieces of data containing important user information for a website. Not many webmasters know or use this, but you can actually use just HTML meta tags to control cookies and browser caching for your website!
Meta Tags are used to store pieces of information on a web page. Essentially, it is information about data, and its purpose is for browsers and search engines to understand and know the page better.

Disabling cache

When you visit a webpage, your browser stores it in its cache so as to make reloading faster. Sometimes, cache errors cause the browser to load an older version of a page, even when new content is available. To prevent this, you can simply disable browser cache from time to time by using some meta tags. Here's what you can do.
<meta http-equiv="Cache-Control" content="no-store" />  
This meta tag is recognized in Firefox, Chrome, and Internet Explorer. Even more so in IE, where you can use more values and specifications to disable caching, as follows.
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
You can also set an expiration date to ensure that the browser will show the file that’s fresh from the server, rather than from the cache.
<meta http-equiv="expires" content="Fri, 18 Jul 2014 1:00:00 GMT" />  
The document expires after the specified date and time. "0" means the browser has to check for a fresh document on each visit.

How to set cookies?

Cookies are small files stored on your browser that contain important user information, such as user and password. Websites may reuse the cookies to tailor some functionality. For example when you shop in an online store, as long as you have not yet checked out, the items remain in your cart even though you have left the browser for several days.

Here's the tag for setting a cookie;
<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZONE">
name=data is the name of the cookies which determines the values set in it. path is the path of document. Whereas, the value of expired indicates the time and date when cookies are deleted from your computer. If you leave the expired date empty, the cookies will be deleted once you quit the browser. Here is a an example cookie that will expire at the end of this year;
<meta http-equiv="Set-Cookie" content="name=data; path=path; expires=Thursday, 01-Jan-2015 00:00:00 GMT">
Got any more useful HTML tricks you can share with us? Let us know in the comments section below!

Need Quick Help within 24 Hours? ASK NOW

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

4 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Can this be used in the Blogger template to prevent all caching, or must it be be included in every post?

  2. For some time I have been looking for this information:
    How can I use for blogspot?

    1. Edit the Blogspot template and add the codes.

  3. I read that expiration headers are not longer used. That they've been replaced by cache-control. Can you comment, and how to use then?