2013-03-24 3 views
5

Я создаю пример LocalStorage. Когда я пользуюсь браузером Chrome, он работает нормально. Но когда я тестирую iPhone Emulator, это не так. Пожалуйста помоги. Вот мой код, чтобы установить локальное значение хранения: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> 

EDIT: в 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: Попробуйте установить LocalStorage в OnDeviceReady затем получить его следующие строки, но по-прежнему не работает.

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

Передвиньте свой код в документе. Уже до onDeviceReady event of PhoneGap. onDeviceReady - это когда вам нужно начать выполнять свой собственный код.

Edit: * Попробуйте следующий код с cordova.js добавлены локально, а не из GitHub *

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

Пожалуйста, смотрите мой выбор. Я изменил коды как ваше предложение, но оно не работает. –

+0

Я вижу, что вы пытаетесь получить данные из локального хранилища, прежде чем устанавливать его. Можете ли вы установить данные в событии deviceReady, а затем получить его в следующей строке? – Whizkid747

+0

См. Мой edit2. Я устанавливаю localstorage на onDeviceReady и получаю следующую строку, но не работает. –

Смежные вопросы