0

我正在尝试配置一个选项来更改字体大小并创建了一个设置但无法持久。该设置是一个选择控件。字体大小的默认设置来自 default.css，但我想根据用户选择进行覆盖。这是 Windows 8 商店中的 html/js 应用程序。任何工作示例都会很棒。谢谢你。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Preferences</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- App references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/preferences.js"></script>
</head>
<body>
<div data-win-control="WinJS.UI.SettingsFlyout"
    data-win-options="{settingsCommandId:'preferences', width:'narrow'}">
    <div class="win-ui-dark win-header">
        <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
        <div class="win-label">Preferences</div>
    </div>
    <div class="win-content ">
        <div class="win-settings-section">
            <label for="fontSize">Font Size:</label>
            <select id="fontSize">
                <option>18px</option>
                <option>24px</option>
                <option>32px</option>
                <option>36px</option>
                <option>42px</option>
                <option>54px</option>
            </select>

        </div>
    </div>
</div>
    </body>
</html>

JS：

(function() {
    "use strict";

    var appData = Windows.Storage.ApplicationData.current.localSettings;

    WinJS.UI.Pages.define("/settings/preferences.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            // Get DOM Elements
            var fontSize = document.getElementById("fontSize");




            //Wire up event handlers
            fontSize.addEventListener("change", fontSizeLeave);


           function fontSizeLeave() {
                appData.values["fontSize"] = fontSize.value;
            };



            // Get data
            // Set settings to existing values
           if (appData.values.size > 0) {
               fontSize.value = appData.values["fontSize"];

           }

        },

        checkpoint: function () {
            // Save data
            appData.values["fontSize"] = fontSize.value;

        },


        unload: function() {
            // Respond to navigations away from this page.
        },

        updateLayout: function(element, viewState, lastViewState) {
            // Respond to changes in viewState.
        }
    });
})();
4

1 回答 1

0

根据我对您的代码的测试，数据持久性没有任何问题。

fontSize.value即使appData.values内容正确，这行代码也会导致 in 中的值为空字符串。

fontSize.value = appData.values["fontSize"];

一个简单的解决方法是为您的每个选项提供值select

<select id="fontSize">
   <option value="18px">18px</option>
   <option value="24px">24px</option>
   <option value="32px">32px</option>
   <option value="36px">36px</option>
   <option value="42px">42px</option>
   <option value="54px">54px</option>
</select>
于 2013-01-08T01:22:57.760 回答