Our Blog

HTML5 LocalStorage with JQT

This technique is similar to the PHP “sticky form” except more powerful and using only HTML5. This example uses jQTwith HTML5 local storage to create a calculator program. Later this can be easily wrapped in PhoneGap to create an app that can be submitted to the app store.

Most software applications need to store data in some sort of persistent fashion in order to be useful. When it comes to web apps, this task has traditionally been handled either with a server-side database or cookies set in the browser. With the advent of HTML5, web developers now have a few more options: localStorage, sessionStorage, and client-side databases. localStorage (collectively referred to as key/value storage) is very similar to cookies in that it allows you to use JavaScript to set name/value pairs that you can then retrieve across multiple page reloads.

Unlike cookies, however, localStorage data is not sent across the wire with the browser requests it lives entirely in the client. Therefore, it’s feasible to store much more data than you would want to with cookies.
// When the saveSettings() function is called, it grabs the values //from the form inputs using jQT’sval() function //and saves each in a localStorage variable of the same name.