--> How to Set Cookies In Blogger Using HTML5? | Experience Lab - Online business creation and development guide for bloggers and startups

How to Set Cookies In Blogger Using HTML5?

Saving data inside cookies in blogger blogs is probably the most untouched topic because we often avoided talking about internet coo...

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! :)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: How to Set Cookies In Blogger Using HTML5?
How to Set Cookies In Blogger Using HTML5?
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy