Question

我正在尝试配置一个选项来更改fontsize并创建一个设置但不能保持。该设置是一个选择控件。字体大小的默认设置来自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.
        }
    });
})();

Answer 1

从我的代码测试开始，数据持久性没有任何问题。

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

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>

LocalSettings Windows商店应用程序中的变量不持久？

1 个答案: