How to Use LocalStorage in Blogger to Set Cookies?

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.

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 popupcookieusing 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 inpopupcookie (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

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