Question

我无法尝试从HTML 5 localstorage动态读取。

我对此很新，可能不知道我在做什么，但我正在尝试阅读此页面上我保存在不同页面上的内容。

保存的内容将取决于用户选择的内容，我希望能够将其读回给他们进行确认。类似于结账车。

以下是代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Local Storage Load Test</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
      <script type='text/javascript' src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  <style type='text/css'>
  </style>



<script type='text/javascript'>//<![CDATA[ 

$(window).load(function(){
    $(document).on("pagebeforehide", "[data-role=page]", function () {
        // variables
        var elements = [],
            id = '',
            value = '',
            text = '';

        // push values of checkboxes and radio buttons into an array
        $("[type=checkbox], [type=radio]", this).each(function () {
            id = $(this)[0].id;
            value = $(this).prop("checked");
            text = $(this).next('label').text();
            elements.push({
                "id": id,
                    "value": value,
                    "text": text
            });
        });

        // convert array into a string
        // in order store it into localStorage
        localStorage["values"] = JSON.stringify(elements);
    });

    $(document).on("pagebeforeshow", "[data-role=page]", function () {
        // active page
        var active = $.mobile.activePage;

        // parse array of checkboxes and radio buttons
        var read_array = JSON.parse(localStorage["values"]);

        // check/uncheck checkboxes and radio buttons
        $.each(read_array, function (e, v) {
            var check_id = "#" + v.id,
                check_value = v.value,
                check_text = v.text;
            $(check_id, active).prop("checked", check_value).checkboxradio("refresh");
            if (check_value == true) {
                $(active).append("Checked text: " + check_text + "<br/>");
            }
        });
    });
});//]]>  

</script>

</head>
<body>
<div data-role="page" id="page2">
    <div data-role="header">
         <h1>Page 2</h1>
    </div>
    <div data-role="content">
        <script type='text/javascript'>
         for (i = 0; i < localStorage.length; i++)
        {
        document.write("<div data-role=\"fieldcontain\">");
                document.write("<form>");
                document.write("<fieldset data-role=\"controlgroup\" data-type=\"horizontal\">");
                    document.write("<legend>Levels:</legend>");
                    document.write("<input type=\"checkbox\" name=\"checkbox-h-2a\" id=\"checkbox-h-2a\" class=\"custom1\">");
                    document.write("<label for=\"checkbox-h-2a\">One</label>");
                    document.write("<input type=\"checkbox\" name=\"checkbox-h-2c\" checked=\"checked\" id=\"checkbox-h-2c\" class=\"custom1\">");
                    document.write("<label for=\"checkbox-h-2c\">Two</label>");
                    document.write("<input type=\"checkbox\" name=\"checkbox-h-2b\" id=\"checkbox-h-2b\" class=\"custom1\">");
                    document.write("<label for=\"checkbox-h-2b\">Three</label>");
                    document.write("<input type=\"checkbox\" name=\"checkbox-h-2d\" checked=\"checked\" id=\"checkbox-h-2d\" class=\"custom1\">");
                    document.write("<label for=\"checkbox-h-2d\">Four</label>");
                document.write("</fieldset>");
            document.write("</form>");
        document.write("</div>");
        }</script>
        <div data-role="fieldcontain">
            <form>
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Mode:</legend>
                    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" class="custom2">
                    <label for="radio-choice-h-2a">Steward</label>
                    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" class="custom2">
                    <label for="radio-choice-h-2b">Guest</label>
                    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="on" checked="checked" class="custom2">
                    <label for="radio-choice-h-2c">Option 1</label>
                    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2d" value="off" class="custom2">
                    <label for="radio-choice-h-2d">Option 2</label>
                </fieldset>
            </form>
        </div> 
     <a href="test1.php" data-role="button">Previous Page</a>
    </div>
</div>    
</body>

</html>

请让我知道我做错了什么以及我该怎么做才能解决它。

谢谢！

动态阅读LocalStorage

0 个答案: