10
May
In part one you got some information on what localStorage was and what browsers supported it. You also saw how easy it was to save an item, get the item from the database and then remove it. I know your still trying to figure out what can you actually do with this localStorage and your about to find out. Again remember that my love for jQuery has not faded so you will see some jQuery through out the code and as I said before feel free to use good ol’ javascript instead of jQuery if you feel the urge.
For this Time Tracking web app we are going to allow you to input a project name, hours spent working on that project and the date. Now these three values will need to be stored together with the same key and following the simple method used in Part One won’t work. However this is a lot easier then you might think. You will create a new array and store those three values. Then with a .join() when saving the item it will give you those three values stored in the database under whatever key you want. In our case we are going to keep it simple and make key an id. First lets get our values ready. Since the key will be a unique id we will grab the current date and get the number of milliseconds since January 1, 1970. This will give us a unique id for each item in the database.
(more…)
10
May
We all know how awesome the future of the web will be with HTML5. This new spec has some amazing potential and is already getting a lot of use. From the new tags like section, article, header and footer to the video debate taking center stage with Apple vs Adobe. There are so many great things about HTML5 but today I want to go over just one; localStorage. Many of you may not have heard about localStorage or may not fully understand how to use it.
First lets start off with what localStorage is. Basically it is a client-side database. That is a database that resides in the users browser and not on your server. The difference between this database and others you may be familiar with resides in that this is for key-value storage. This means you won’t be writing some crazy sql intense application while using localStorage. However, this type of storage does offer a lot of possibilities for web apps. Remember one thing though, since this is client-side, the data stored will be on a per browser basis. If a user switches between Safari and Firefox, it won’t use the same database. Same if they use your app on one machine and go to another somewhere else, that data will only be available on the machine it was created/saved on. One last thing before jumping into some code is browser support. We all know that browser support is important depending on your target audience with your app. In this case localStorage is supported by most modern browsers including Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+.
Now lets get into some code. Where localStorage differs from cookies or sessionStorage is that the data stored in localStorage is still there even after the browser is closed and is shared across multiple windows. You don’t have to worry about a user deleting the cookies and all their data. A quick note; because of my love for jQuery, I will be using jQuery when using localStorage. However, jQuery is not required to do any of this, I just like how clean it makes everything look. First lets see a simple example of using localStorage.
(more…)
