Question

我必须在我的phonegap（3.0）应用程序中使用localstorage，以便我可以在每个页面中调用用户想要的特定号码。为了做到这一点，我使用下面的表单和脚本。此脚本在浏览器中工作，但不适用于phonegap构建。我应该错过一些但却找不到的东西！

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>local storage</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
      <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <style>
        #message {
            display: none;
            border-radius: 10px;
            padding: 10px;
            background-color: #ff0000;
            color: #fff;
        }

        #storageDemoPage h2 {
            white-space: normal;
        }
    </style>
    <script type="text/javascript">
        var localStorageKey = "allo";
        $('#storageDemoPage').live('pagecreate', function() {
                showStoreValue();
            $('#addToStorage').click(function(e) {
                localStorage.setItem(localStorageKey, $('#entry').val());
                showStoreValue();
                e.preventDefault();
            });
        });

        function showStoreValue() {
            var item = localStorage.getItem(localStorageKey);
            if (item == null) {
                item = 'Pas de valeur';
            }
            else if (item.length === 0) {
                item = 'Aucune valeur d\'enregistrée';
            }
            $('.storeItem').text(item);
        }
    </script>
</head>
<body>
<section data-role="page" id="storageDemoPage">
    <section data-role="header">
        <h2>My app</h2>
    </section>
    <section data-role="content">
        <p id="message"/>
        <ul data-role="listview" data-inset="true">
            <li data-role="list-divider">Enter your number</li>
            <li>
                <input type="text" id="entry" name="entry" placeholder="Write digits"/>
                <input type="button" id="addToStorage" value="Store value"/>
            </li>
            <li data-role="list-divider">Value record</li>
            <li class="storeItem"/>
        </ul>
          <div data-role="content">
            <p id="audio_position"></p>
            <ul id="allRepos" data-role="listview"></ul>
          </div>
    </section>    
</body>
</html>

编辑：在开头添加cordova脚本

Answer 1

感谢@QuickFix和@Chris，这是解决方案：

 <script type="text/javascript">
    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    var localStorageKey = "allo";

    function onDeviceReady() {
        showStoreValue();
            $('#addToStorage').click(function(e) {
                window.localStorage.setItem(localStorageKey, $('#entry').val());
                showStoreValue();
                e.preventDefault();
            });

    }

        function showStoreValue() {
            var item = localStorage.getItem(localStorageKey);
            if (item == null) {
                item = 'Pas de valeur';
            }
            else if (item.length === 0) {
                item = 'Aucune valeur d\'enregistrée';
            }
            $('.storeItem').text(item);
        }    
    </script>

Answer 2

以下是您可能错过的内容

a）在头标记中包含Cordova脚本文件。

b）在使用本地存储之前使用并听取设备准备就绪。

实现这一点可以解决您的问题。

Phonegap和LocalStorage问题但在浏览器中工作

2 个答案: