2013-03-24 7 views
5

Ich erstelle ein Beispiel für LocalStorage. Wenn ich den Chrome-Webbrowser verwende, funktioniert es einwandfrei. Aber wenn ich auf dem iPhone Emulator teste, tut es das nicht. Bitte helfen Sie. Hier ist mein Code, um den lokalen Speicher Wert zu setzen:LocalStorage funktioniert nicht auf PhoneGap

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> 

Hier ist der Code, wo ich versuchte, die gespeicherten Daten zu erhalten:

<!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: Bei Whizkid747 dem vorschlägt, die ich ändern, wie unten die Skript Quelle, aber es funktioniert immer noch nicht.

 <!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: Versuchen Sie localstorage auf OnDeviceReady setzen dann nächsten Zeilen, aber immer noch nicht funktioniert.

<!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> 

Antwort

6

Verschieben Sie Ihren Code in document.ready zu onDeviceReady event of PhoneGap. onDeviceReady ist, wenn Sie Ihren benutzerdefinierten Code ausführen müssen.

Edit: * Versuchen Sie den Code unten mit cordova.js lokal und nicht von Github hinzugefügt *

<!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="cordova-2.5.0rc1.js"></script> 

    </head> 
    <body> 
     <h1>Example</h1> 
     <p id="p1">localStorage</p> 
     <script type="text/javascript"> 

      // 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> 
    </body> 
</html> 
+0

Bitte meine bearbeiten sehen. Ich habe die Codes als Vorschlag geändert, aber es funktioniert nicht. –

+0

Ich sehe, dass Sie versuchen, Daten aus dem lokalen Speicher zu erhalten, bevor Sie es einstellen. Können Sie die Daten in DeviceReady-Ereignis festlegen und dann in der nächsten Zeile abrufen? – Whizkid747

+0

Bitte sehen Sie meine edit2. Ich setze localstorage auf onDeviceReady und bekomme es nächste Zeile, funktioniert immer noch nicht. –