How to Set Cookies In Blogger Using HTML5?

tableborder:1px solid #ddd; margin:0 auto;
td padding:10px; border-top:1px solid #ddd; border-left:1px solid #ddd;

Saving 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?

Part 2: How to use LocalStorage in Blogger to set cookies?

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:

localStorage.getItem("key")

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:

sessionStorage.getItem("key")

Test the demo below to get a crystal clear idea.

Show me a Demo!

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:

Install Custom Blogger notification bar

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

5
comments

PLEASE NOTE:

We have Zero Tolerance to Spam.

Chessy Comments and Comments with
'Links'
will be deleted immediately upon our review.

(function() {
var items = ['id': '2589466626043527963', 'body': 'It wonx26#39;t create any security issue. ??', 'timestamp': '1387390394543', 'permalink': 'https://www.mybloggertricks.com/2013/12/setup-and-create-cookies-in-blogger.html?showCommentx3d1387390394543#c2589466626043527963', 'author': 'name': 'Anonymous', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': '', 'displayTime': 'Dec 18, 2013, 11:13:00 PM', 'deleteclass': 'item-control blog-admin pid-531334590', 'id': '8851629496789232286', 'body': 'Thanks Mustafa For Sharing the article, My Question is that adding sitemap Page widget in Blog have any bad effect , because in one of your post you said that google consider as a duplicate content ,', 'timestamp': '1387394904947', 'permalink': 'https://www.mybloggertricks.com/2013/12/setup-and-create-cookies-in-blogger.html?showCommentx3d1387394904947#c8851629496789232286', 'author': 'name': 'adil khan', 'avatarUrl': '//lh3.googleusercontent.com/-1EzMU7NV16A/AAAAAAAAAAI/AAAAAAAAFws/fouWboCJGQ0/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/14119996077393501221', 'displayTime': 'Dec 19, 2013, 12:28:00 AM', 'deleteclass': 'item-control blog-admin pid-689326546', 'id': '8514012290289597390', 'body': 'Thatx26#39;s a great article. x3cbr /x3ex3cbr /x3eHowever, i would like to correct you at a point where you said that x26quot;LocalStoragex26quot; eliminates security issues.x3cbr /x3ex3cbr /x3ex26quot;thatx26#39;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.x26quot;x3cbr /x3ex3cbr /x3eHowever, thatx26#39;s untrue because the javascript can still access the cookies present inside your local storage. Hence, the security issues still remain prevalent. x3cbr /x3ex3cbr /x3ex3cbr /x3erafay', 'timestamp': '1387490887031', 'permalink': 'https://www.mybloggertricks.com/2013/12/setup-and-create-cookies-in-blogger.html?showCommentx3d1387490887031#c8514012290289597390', 'author': 'name': 'Rafay Baloch', 'avatarUrl': '//lh4.googleusercontent.com/-QFpq0g9Pn_g/AAAAAAAAAAI/AAAAAAAACjo/gm2BoL3un_A/s35-c/photo.jpg', 'profileUrl': 'https://www.blogger.com/profile/15944091083959815608', 'displayTime': 'Dec 20, 2013, 3:08:00 AM', 'deleteclass': 'item-control blog-admin pid-1846734574', 'id': '2607654203098713789', 'body': 'Very Nice', 'timestamp': '1387563086470', 'permalink': 'https://www.mybloggertricks.com/2013/12/setup-and-create-cookies-in-blogger.html?showCommentx3d1387563086470#c2607654203098713789', 'author': 'name': 'Anonymous', 'avatarUrl': '//img1.blogblog.com/img/blank.gif', 'profileUrl': '', 'displayTime': 'Dec 20, 2013, 11:11:00 PM', 'deleteclass': 'item-control blog-admin pid-531334590', 'id': '7255292791876505169', 'parentId': '2589466626043527963', 'body': 'Nope. No security issue.', 'timestamp': '1472336708623', 'permalink': 'https://www.mybloggertricks.com/2013/12/setup-and-create-cookies-in-blogger.html?showCommentx3d1472336708623#c7255292791876505169', 'author': 'name': 'Dog2puppy', 'avatarUrl': '//lh3.googleusercontent.com/zFdxGE77vvD2w5xHy6jkVuElKv-U9_9qLkRYK8OnbDeJPtjSZ82UPq5w6hJ-SAx3ds35', 'profileUrl': 'https://www.blogger.com/profile/00847664338955314031', 'displayTime': 'Aug 28, 2016, 3:25:00 AM', 'deleteclass': 'item-control blog-admin pid-827527252'];
var msgs = 'loadMore': 'Load more...', 'loading': 'Loading...', 'loaded': 'No more!', 'addComment': 'Add comment', 'reply': 'Reply', 'delete': 'Delete';
var config = 'blogId': '8193278726666811965', 'postId': '8788941053664241323', 'feed': 'https://www.mybloggertricks.com/feeds/8788941053664241323/comments/default', 'authorName': 'M. Mustafa Ahmedzai', 'authorUrl': 'https://www.blogger.com/profile/11681339458447132019', 'baseUri': 'https://www.blogger.com', 'maxThreadDepth': 2;
// 0)
cursor = parseInt(items[items.length - 1].timestamp) + 1;

var bodyFromEntry = function(entry)
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved')
return '' + entry.content.$t + '';

return entry.content.$t;

var parse = function(data)
cursor = null;
var comments = ;
if (data && data.feed && data.feed.entry)
for (var i = 0, entry; entry = data.feed.entry[i]; i++)
var comment = ;
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array)
var auth = entry.author[0];
if (auth)
comment.author =
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
;

if (entry.link)
if (entry.link[2])
comment.link = comment.permalink = entry.link[2].href;

if (entry.link[3])
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1])
comment.parentId = pid[1];

comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty)
for (var k in entry.gd$extendedProperty)
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass')
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime')
comment.displayTime = entry.gd$extendedProperty[k].value;

comments.push(comment);

return comments;
;
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor)
url += '&published-min=' + new Date(cursor).toISOString();

window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

AnonymousDec 18, 2013, 11:13:00 PM

It won't create any security issue. ??

ReplyDelete
Replies

adil khanDec 19, 2013, 12:28:00 AM

Thanks Mustafa For Sharing the article, My Question is that adding sitemap Page widget in Blog have any bad effect , because in one of your post you said that google consider as a duplicate content ,

ReplyDelete

Rafay BalochDec 20, 2013, 3:08:00 AM

That's a great article.

However, i would like to correct you at a point where you said that "LocalStorage" eliminates security issues.

"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."

However, that's untrue because the javascript can still access the cookies present inside your local storage. Hence, the security issues still remain prevalent.

rafay

ReplyDelete