Ads Top

How to Set Cookies In Blogger Using HTML5?

setup cookies in BloggerSaving data inside cookies in blogger blogs is probably the most untouched topic because we often avoided talking about internet cookies due to its privacy concerns. There are many cookie plugins available such as this jQuery Plugin by Hartl which monitors and stores user activity. But neither will we use any such plugin nor will we run bulky JavaScript on front end. We will rather use HTML5 LocalStorage, the most efficient new technology that is rapidly embraced by developers across all platforms. Unlike web cookies, LocalStorage doesn't save data as text files on your hard disk, instead it saves them on your browser and only the website which stored data in the browser can access it, that's the most interesting part of it that has vanished possibility of all security threats forever. You can now easily control the display of widgets on your BlogSpot blogs using this method.

You can decide whether to show popups once or never when page loads, you can also store the state of selected tabs on accordion and tabs widgets. Your readers will now experience a more interesting interface with endless possibilities. Lets dive into this new method and learn for the first time how to save index states using HTML5 Localstorage method in blogspost blogs.

Note: Please remember that since "cookie" is the most familiar word to indicate storage of session data on user side, therefore we will term "HTML LocalStorage" also as cookie in this tutorial to keep things simple. In order to clearly understand its use I have divided the tutorial in two parts. The part1 explains this new technology and part2 will give an example of implementation.
Part 1: How to Set Cookies In Blogger Using HTML5?
Web Cookie
HTML Local Storage
1. Saves data on your hard disk 1. Saves data on your browser
2. Anyone can access the cookie
2. Not everyone can access it. A website can only access data stored by itself
3. Slow execution 3. Instant execution
4. Stores limited amount of Data 4. Stores Large amount of Data
5. Not secure 5. More secure

Web Cookie:

A web cookie, HTTP cookie or browser cookie, is simply a text file that a Website stores on a user's hard disk to contain information about user activity. Cookies allow a Website to store information on a user's machine and later retrieve it. The information is stored in name and value pairs. Facebook, Google and all major sites show stuff you like because they are tracking your activity using cookies stored on your hard disk.
Did you ever wonder how Facebook knows which sites do you visit? Do you know how come Facebook Ads on your profile are related to the sites you often visit? The answer is simple. Facebook is tracking your activity by storing cookies on your hard disk even when you log out! Today almost every website has a Facebook plugin installed in it, may it be like button, like box or Facebook openGraph tags, all these plugins keep on informing Facebook about what you do on the web! Strange but true. 
Cookie files are stored in your root directory often C drive in windows OS.

HTML LocalStorage:

Here comes my favorite way of controlling events on a webpage. It also does the same work which a cookie does. The only difference is that it stores data on your browser instead of hard disk. Its more secure and much faster. It can store large amount of data without effecting a website's load time. Thus having an edge over a web cookie.
The data is stored in key/value pairs, and a web page can only access data stored by itself. It has two types which are:

1. LocalStorage:  stores data with no expiration date

The data will remain in client's browser forever as long as the client doesn't delete browser cache.

To set a LocalStorage cookie just use the function:

localStorage.setItem("key", value);

To fetch data or access data use:


2. SessionStorage :  stores data for one session

Here data will be saved for only one session. Data is lost as soon as the user closes the browser or opens the same website on a new tab.
To set a sessionStorage cookie just use the function:

sessionStorage.setItem("key", value);

To access data use:


Test the demo below to get a crystal clear idea.

Show me a Demo!

session cookies in blogger stickybar

Take an example of the sticky bar used on MBT. When you click the toggle button, the sticky bar shows or hides. When you don't want this bar to be shown, simply click the toggle button. Now you can visit any page on the blog and the stickybar will remain hidden. But if you close the browser or open mbt in a new tab, you will observe that stickybar shows up again. This happens because the session data expires as soon as you close the browser window or switch to a new tab for same site.
If you would like to add the above stickybar to your blogs without cookie functionality then read:

Need Help?

If there is anything that confuses you feel free to ask me. I have not shared any scripting details here because we will share that in implementation portion i.e. Part2. There you will learn how these two functions are used with jQuery in simple and extremely easy way.
Peace and blessings buddies. Come on Buddies, its time to throw some questions! :)


adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.