2013-03-24 46 views
5

我創建了一個LocalStorage的示例。當我使用Chrome瀏覽器時,它工作正常。但是當我在iPhone模擬器上測試時,它沒有。請幫忙。 這裏是我的代碼來設置本地存儲值:LocalStorage在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> 

這裏就是我試圖讓保存的數據的代碼:

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

編輯: 在Whizkid747的建議,我改變腳本源如下,但它仍然無法正常工作。

 <!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:嘗試在OnDeviceReady設置的localStorage然後把它下一行,但仍然無法正常工作。

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

回答

6

將您的代碼在document.ready中移動到onDeviceReady event of PhoneGap。 onDeviceReady是當你需要開始執行你的自定義代碼。

編輯: * 嘗試下面的代碼與從GitHub本地和沒有添加cordova.js *

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

請看看我的編輯。我已經根據你的建議更改了代碼,但它不起作用。 – 2013-03-24 15:56:31

+0

我發現你在設置之前試圖從本地存儲中獲取數據。您可以在deviceReady事件中設置數據,然後將其置於下一行中? – Whizkid747 2013-03-24 16:58:11

+0

請參閱我的edit2。我在onDeviceReady上設置了localstorage並將它放到下一行,但仍然不起作用。 – 2013-03-25 02:20:45