How to Use LocalStorage in Blogger to Set Cookies?


how to create cookies in blogger?In our last post we learned the difference between a web cookie and HTML5 Local storage. Now when you are cleared what are the benefits of using HTML5 Local and Session storage methods to store data on a client's browser, lets now learn how to implement these functions to any HTML DOM in Blogspot blogs. This method is not limited to Blogger but can also be used in exact same procedure in Wordpress blogs. Lets learn this interesting new technology with this extremely easy first time guide.

If you are here to add cookies to the stickybar and not interested on how it is done then you may read this part only.

Part2: How to Use LocalStorage in Blogger to Set Cookies?

How cookies are setup?

1. Assigning ID

If you are familiar with HTML and CSS basics then this would be extremely easy for you. You know that in order to apply a CSS style, you either use ID starting with (#) sign or a Class starting with (.) sign. Any HTML DOM can be given an identity i.e. ID. This id is then used in front-end scripts like jQuery, JavaScript etc. to add visual effects to HTML section. You can add an ID to any HTML tag may that be <div>, <span>, <img> or <a>.

Suppose if you wish to add an ID to a popup container then find its DIV and add an ID as shown below:

<div  id="KEY">

---

---

---

---

---

---

</div>

Key= The name of your ID. it can be anything.

If incase the popup container already contains an id called mbtpopup then you can add a new ID in this way:

<div id="mbtpopup KEY">

---

---

---

---

---

---

</div>

Just give a space and there you go with the new ID name. You can add as many IDs as you want with a space in between any two IDs and also make sure the ID names should be unique. In the above example the Key could be anything except the mbtpopup. Lets take KEY as hidepopup

2. Using Jquery to setup a Cookie

Now when you have assigned an ID name, its time to set a HTML5 cookie in order to control the behavior of the popup. Suppose if you wish to show the popup window only once to your visitors then you can simply add the following script just above </head> tag in your blogger template:

<script type='text/javascript'>

$(document).ready(function() {

if(sessionStorage.getItem("popupcookie") == 1) {

$("#hidepopup").hide();

}

sessionStorage.setItem("popupcookie", 1);

});

</script>

Carefully understand these important points:

Setting cookie:

  • The yellow highlighted part is responsible for creating/setting a sessionStorage. You already know the difference between a session and Local Storage. If not then please read Part1 of this tutorial series.
  • In yellow section we kept the name of cookie as popupcookie. You can give your cookie any name you like. We also assigned it a value 1.
  • The yellow part will execute as soon as the page loads first time.

Reading Cookie:

  • The green highlighted section is where we are checking the value of popupcookie using an if conditional statement.
  • The if condition will run only if popupcookie is set and has some value stored in it. In our case the value is 1.
  • If the condition is met, the red section will execute and it will hide the popup from appearing on screen. This condition is true only if the popup has already been viewed and we are trying to hide the popup the next time a visitor comes.

Remember the order of writing the codes for setting and reading cookie. We will first check whether the popup has already appeared once or not. If this is the first time a visitor has opened your blog, then of course there will be no value stored inside popupcookie because it never executed before. But if this is the second time then we already have some value stored in popupcookie (the yellow section) , the condition will be true and the popup will not be shown this time.

I hope you are cleared now how to assign IDs and setting Cookie. Lets now learn how we added

Stickybar with cookies!

The blogger notification bar that we released last year was the most liked sticky bar by our 80K readers. Now its time to take it to the next level by adding Session Storage in order to control its display. If a visitor would not want to see the stickybar at top, he will simply click the close button and the bar will remain hidden as long as he is navigating through the blog posts.

stickybar with cookie

DEMO

For Demo please close the stickybar inside our blog and visit another page and see that it remains hidden. Then open the bar and again visit a new page or refresh the page. You will find that the bar shows up again. This cookie will work as long as you have not closed the browser. It will get deleted or will be destroyed as soon as you close the browser. If you want the cookie to have a lifetime life then use Localstorage instead of SessionStorage. That simple!

Installation

  1. First install the stickybar on your blog by reading this tutorial: Add stickybar
  2. Next paste the following script just above</head> tag in your blogger template
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
 $(document).ready(function() {


if(sessionStorage.getItem("HideBar") == 0) {
     $("#bloggernotification").show();
 }  

if(sessionStorage.getItem("HideBar") == 1) {
     $("#bloggernotification").hide();
      $("#openbloggernotification").css('top','0px');
 }  
    

$("#closebloggernotification").click(function(){ 
sessionStorage.setItem("HideBar", 1);   
});

                                                                                                                                          $("#openbloggernotification").click(function(){ 
$("#bloggernotification").show();
sessionStorage.setItem("HideBar", 0); 
});

 });
</script>
 
  • Delete the yellow highlighted code if you have already added the jQuery library inside your blog.

    3.  Save your blog and you are all done! :)

Need help?

Please let me know if you would need further help in setting up cookies with HTML5. Would be a pleasure helping you buddies. Remember to avoid comments with hyperlinks. We simply take that as spam and delete them immediately.

With that we end our series on HTML5 cookies. Peace and blessings buddies. :)

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 »

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

  1. Managing blogs is really difficult na?? How do you come up with new ideas on regularly?? Is that you modify the contents from other's posts or you generate a whole one from scratch... Very difficult to manage!.. I hardly managed to write contents for first 6 months and then i don't know where was my blog gone.... :D :D.. . Now i make my living from free lancing..i.

    ReplyDelete
  2. Nice tutorial for beginners, I've used HTML5 storage about 3 months ago on my blog.
    Your tutorial will surely help those who don't know about local storage or session storage.

    ReplyDelete
  3. Mohammed bhaijaan, I got a query - If I am having a blog xyz.blogspot.com & i am using url shortener - www.xyz.co.nr..Is there any way I can change all links inside blog to xyz.co.nr/p/page.html & for posts xyz.co.nr/2013/12/anything.html ...so that its easy for readers to identify short url and also it gives professional domain look to my blog. Help out Bhai.. :)

    Hoping for reply soon.

    ReplyDelete
  4. Best information you provided dear

    ReplyDelete
  5. It not increase the speed by removing the css bundle, in fact it only hide the css bundle from the browser and manipulate the speed test so nothing diffrence when you remove or not the css bundle

    ReplyDelete
  6. Thanks for this Tutorial. I just to know if their is a way to combine two javascript code in one javascript? Please make a tutorial about this.

    Thank You!
    JelBee

    ReplyDelete