小编use*_*908的帖子

将表单数据保存到本地存储并在刷新时显示

我正在制作一个用户可以输入数据的表单.我想通过使用本地存储来保存这个日期.但是当我刷新页面时,只记住身高和体重.我一直坚持努力使性别,运动和生日也被记住.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <title>Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
    <script>
        $(document).ready(function() {
            $(window).unload(saveSettings);
            loadSettings();
        });

        function loadSettings() {
            $('#height').val(localStorage.height);
            $('#weight').val(localStorage.weight);
            $('#dateOfBirth').val(localStorage.dateOfBirth);
            $('input[type=radio]:checked').val(localStorage.gender);
            $("#sportive").find("option[value=" + localStorage.sportive + "]").attr("selected", "selected");
        }

        function saveSettings() {
            var height = document.getElementById("height").value;
            var weight = document.getElementById("weight").value;
            var sportive = document.getElementById("sportive").value;
            var gender = $('input[type=radio]:checked').val();
            var dateOfBirth = document.getElementById("dateOfBirth").val();

            localStorage.height = height;
            localStorage.weight = weight;
            localStorage.dateOfBirth = dateOfBirth;
            localStorage.sportive = sportive;
            localStorage.gender = gender;
        }


    </script>
</head>
<body>
    <div data-role="content"> …
Run Code Online (Sandbox Code Playgroud)

jquery html5 local-storage

14
推荐指数
1
解决办法
3万
查看次数

标签 统计

html5 ×1

jquery ×1

local-storage ×1