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

【问题标题】：LocalSettings Variables in windows store app not persisting?Windows商店应用程序中的LocalSettings变量不持久？
【发布时间】：2013-01-08 09:22:57
【问题描述】：

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

【问题讨论】：

标签： windows-8 windows-store-apps

【解决方案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>

【讨论】：

我现在将这些控件更改为一个范围。这仍然有效吗？（不是选项部分）