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?
| 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:
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! :)
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 »
Mohammad
12/18/2013
blogger tricks
,
Web Designing
It won't create any security issue. ??
ReplyDeleteNope. No security issue.
DeleteThat's a great article.
ReplyDeleteHowever, 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
Very Nice
ReplyDelete