Question

我创建了一个LocalStorage示例。当我使用Chrome网络浏览器时，它运行正常。但是，当我在iPhone模拟器上测试时，它没有。请帮忙。这是我设置本地存储值的代码：

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>

Answer 1

将您在document.ready中的代码移至onDeviceReady event of PhoneGap。 onDeviceReady是您需要开始执行自定义代码的时候。

修改 * 尝试使用本地添加的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>

Answer 2

在iOS 6上运行Cordova 2.1（在2.2中修复）时出现问题：第一次运行应用程序时初始化本地存储不起作用。

请检查此解决方案： http://www.x-services.nl/cordova-localstorage-cleared-after-first-app-launch-ios6/369

LocalStorage不适用于PhoneGap

2 个答案: