LocalStorage ne fonctionne pas sur PhoneGap

- Je créer un exemple de LocalStorage. Lorsque j'utilise le navigateur web google Chrome, Il fonctionne très bien. Mais quand je l'ai tester sur Émulateur iPhone, Il ne le fait pas. S'il vous plaît aider.
Voici mon code pour définir le local de stockage de valeur:

function onclick(){
    window.localStorage.setItem("data","Nguyen Minh Binh");
}

===========

    <!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
            <script src="cordova-2.5.0.js"></script>

            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
            <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
            <script src="js/index.js" type="text/javascript"    ></script>
    </head> 

    <body> 
        <a data-role="button" href="DemoWOrklightJQM/index.html"  data-prefetch onclick="onclick()">Click me</a>
    </body>
</html>

Voici le code où j'ai essayé d'obtenir les données enregistrées:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
});
</script>
</head>
<body id="content" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
<a href="#" onclick="getData(); return false;" data-role="button" id="button" data-theme="a" data-icon="home" data-iconpos="left" data-corners="true">Button</a>
</div>
</div>
</body>
</html>

EDIT:
Au Whizkid747 suggèrent, je change la source de script comme ci-dessous mais Ça ne fonctionne toujours pas.

        <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="
viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
< script  type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", deviceready, false);
}
function deviceready(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
}
</script>
</head>
<body id="content" onLoad="onLoad();" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
<a href="#" onclick="getData(); return false;" data-role="button" id="button" data-theme="a" data-icon="home" data-iconpos="left" data-corners="true">Button</a>
</div>
</div>
</body>
</html>

EDIT2: Essayez de définir localStorage à OnDeviceReady puis obtenir à côté des lignes, mais ne fonctionne toujours pas.

<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script src="https://raw.github.com/phonegap/phonegap/2.5.0rc1/lib/android/cordova-2.5.0rc1.js"></script>
<script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
//PhoneGap is ready
//
function onDeviceReady() {
window.localStorage.setItem("key", "minhbinh");
var keyname = window.localStorage.key(i);
//keyname is now equal to "key"
var value = window.localStorage.getItem("key");
//value is now equal to "value"
window.localStorage.removeItem("key");
window.localStorage.clear();
//localStorage is now empty
$("p#p1").text(value);
}
</script>
</head>
<body>
<h1>Example</h1>
<p id="p1">localStorage</p>
</body>
</html>

OriginalL'auteur Nguyen Minh Binh | 2013-03-24