HTML 5 LocalStorage Mobile Web Application with PhoneGap for Windows Phone 7& i-Os


One of the great feature of HTML 5 is the support of localstorage & sessionstorage which is also redefined in Windows Phone as Isolated Storage. Building Offline Application Cache with manifest  files thus becomes easy for web apps of smartphones.

This article demonstrates how to use localstorage functionality in HTML 5 with PhoneGap support. For this rendering just creating a Mobile JQuery Project from Visual Studio template as like this:

  • Next some HTML 5 Code in Index.aspx as basic CSS 3 styles & JavaScript rendering.

<%

@Page Language=”C#”AutoEventWireup=”true”CodeBehind=”Index.aspx.cs”Inherits=”MobileWeb_App.Index” %>

<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<title>Mobile Web without Server</title>

<script>

document.addEventListener(“DOMContentLoaded”, function () {

var foodList = document.getElementById(‘foodList’);

var foodField = document.getElementById(‘foodName’);

document.getElementById(‘foodForm’).addEventListener(‘submit’, function (evt) {

evt.preventDefault();

var newFood = foodField.value;

var newFoodItem = document.createElement(‘li’);

newFoodItem.innerHTML = newFood;

foodList.appendChild(newFoodItem);

foodField.value =“”;

return false;

},

false);

});

</script>

<style>

 body

{

background:white;

}

div#main

{

background:#ccc;

border:black1pxsolid;

height: 82%;

padding:10%;

width:80%;

-webkit-border-radius:8px;

}

</style>

<meta name=”viewport”content=”width=device-width,initial scale=”1.0/>

</head>

<body>

<div id=”main”>

<h1>List Some Food</h1>

<form id=”foodForm”>

<input type=”text”id=”foodName”placeholder=”A name of Food”/>

<button id=”submitFood”>Tell Us</button><br/>

<ul id=”foodList”>

</ul>

</form>

</div>

</body>

</html>

  • Lets look in iPhone 4 Mobile Safari.

  • Lets add some code for localstorage in HTML 5 which will be stored as browser offline cache.

var  l = window.localStorage.length;

var i = 0;

var storedFoodName;

function addNewFoodItem(foodName) {

var newFoodItem = document.createElement(‘li’);

newFoodItem.innerHTML = foodName;

foodList.appendChild(newFoodItem);

}

for (i; i < 1; i++) {

storedFoodName = window.localStorage.key(i);

if (storedFoodName.match(/^food[.]/))

addNewFoodItem(window.localStorage.getItem(storedFoodName))

}

  •  Lets have output for Windows Phone 7 & HTML 5 supported Internet Explorer 9 with GPU acceleration.

  • Internet Explorer 9 renders like this:

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

4 Responses to HTML 5 LocalStorage Mobile Web Application with PhoneGap for Windows Phone 7& i-Os

  1. Pingback: Microsoft trumpets Windows Phone 7 numbers on first birthdayhothotblogs.info – 5 | hothotblogs.info - 5

  2. Pingback: Hoodia Balance Reviews

  3. Pingback: Buy Facebook Fans

  4. Pingback: Spiffy | PhoneGap with Windows Phone resource page

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: