I recently added article about web storage and demonstrated how to use local storage and session storage. So i thought to go further and create a application based on html5 web storage so that me and you all can better understand how web storage works and how it can be coded.
So here we are creating jquery mobile Iphone/Ipad application which is simple Todo app for iphone ipad using jquery mobile and web storage, where you can list your todo’s and once its completed you delete it from list. For this app i am using local storage so if you create a list and then come back after few days it will be there as it is, so you can use this app for your daily tasks management.
 |
|
Index.php
<html> <head> <title>TODO App</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> </head> <body onload="onBodyLoad()">
<a href="http://www.amitpatil.me/?s=iphone+ipad" data-theme="b" data-icon="star">More iphone Apps</a> </div> </body> </html>var i = localStorage.length; function onBodyLoad(){ var todo = ""; create_new_list(); $("#clear").click(function(){ localStorage.clear(); $("#todo_list li").fadeOut(function(){ $(this).html(""); }); }); $("#remove").live("click",function(e){ var index = $(this).closest("li").attr("id"); $(this).closest("li").slideUp(function(){ // remove the selected item localStorage.removeItem('names_'+index); // rearrange localstorage array for(i=0; i < localStorage.length; i++) { if( !localStorage.getItem("names_"+i)) { localStorage.setItem("names_"+i, localStorage.getItem('names_' + (i+1) ) ); localStorage.removeItem('names_'+ (i+1) ); } } // clear existing list UI $("#todo_list").html(""); // create new list create_new_list(); }); }); } function create_new_list(){ for (var i = 0; i < localStorage.length; i++){ todo = localStorage.getItem('names_'+i); $("#todo_list").append(''+todo+'Remove '); } // Refresh list so jquery mobile can apply iphone look to the list $("#todo_list").listview(); $("#todo_list").listview("refresh"); } function save_todo(){ var todo = $("#textinput1").val(); if(todo.length){ // store item in local storage localStorage['names_'+i] = todo; // Update todo list $("#todo_list").append(''+todo+'Remove '); // Refresh list so jquery mobile can apply iphone look to the list $("#todo_list").listview(); $("#todo_list").listview("refresh"); i++; } }add_todo.html
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="themes/default/" /> </head> <body>Add TODO
</body> </html>
About Amit
Hi Amit. I noticed that when a note is a little long, you can’t see the rest of the text when viewed on small devices or when your browser is minimized. It shows … and when you click on it nothing happens.
Is there any way to have it so when someone clicks on the message, it shows the rest of the message?
Kev, If you like to implement that functionality, open index.html file and make below changes to it, it will solve your problem.
1) Locate the line which says
// update todo listand replace the
$("#todo_list").append('<li id="'+i+'"><a href="#" rel="nofollow">'+todo+'</a><a href="#" data-rel="dialog" data-withtransition="slideup" id="remove">Remove</a></li>');
$("#todo_list").append('<li id="'+i+'"><a href="#" rel="nofollow"><span style="white-space:normal;">'+todo+'</span></a><a href="#" data-rel="dialog" data-transition="slideup" id="remove" rel="nofollow">Remove</a></li>');Notice the change
<span style="white-space:normal;">'+todo+'</span>2) Locate
function create_new_list()in the same code and apply the same change, wrap'+todo+'with"<span style="white-space:normal;">+'todo'+</span>Or simply view source of the demo page and overwrite it with existing code in index.html page. Let me know if you have any problem with it.
Thanks for the quick response Amit. It worked perfectly, beautiful job.
I have one more question for you. I noticed a link for docs-dialogs.html in the add_todo.html. I don’t have a page like that. Do I need it?
Save
No you dont need it, It should work without that page, I guess its there by mistake. remove it or let it be there, it will work either way.
Ok, cool, I replaced it with # and it still works. Do you think it’s possible to make the list editable or would that be too much of a hassle?
Yes its bit more hassle, you will have to attach “index” of each item in its holder so when you click on edit item it will again recall that item in editing form and when you click on save button it will replace old value with new one. FYI i am using localstorage feature of html5. Read more here http://stackoverflow.com/questions/7265028/how-do-i-change-a-single-value-inside-a-localstorage-item and http://jsfiddle.net/F8sF2/
It sounds a little too complicated for me but thanks for all your help.
Hello Amit…i would really like to know more about Html 5
Please you can Pm me on kersyduru at gmail
Yes i will be definitely posting more posts related to HTML5, keep visiting.
Hello Amit,
I’m trying this out in Eclipse for an android app, but the clear and remove click functions won’t work. I’ve tried using the same versions of jquery and jquery mobile that you’re using, but still nothing. I’ve moved the js around: top, bottom, in the doc ready, but nothing again. Any ideas would be appreciated. Everything but clear and remove works. Thanks.
Are you trying o creae a app using Phonegap (cordova) ? As per my knowledge i believe that local storage is supported in android browsers so it should work. May be you would like to check is its really supported using below code
if(typeof(Storage)!=="undefined")
{
// Yes! localStorage and sessionStorage support!
}
else
{
// Sorry! No web storage support..
}