Question

在我的秒表历史表中，它显示开始时间，结束时间，长度，时间之间的历史记录。但是，如果我刷新浏我需要以前的数据保留下次，数据将存储在本地存储中。

感谢您的帮助。

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        function PadDigits(n, totalDigits)
        {
            n = n.toString();
            var pd = '';
            if (totalDigits > n.length)
            {
                for (i=0; i < (totalDigits-n.length); i++)


                {
                    pd += '0';
                }
            }
            return pd + n.toString();
        }

        var lastEndTime = null;
        var starttime = null;
        var endtime = null;

        function startTimer()
        {
            date = new Date();
            starttime = date;
            if(lastEndTime == null)
            {
                $('#history').html('');
            }
            $('#action').html('<img src="pause.png"><br>Stop Timer');
        }

        function stopTimer()
        {
            $('#action').html('<img src="play.png"><br>Start Timer');
            date = new Date();
            endtime = date;
            addRowToTable(starttime,endtime,lastEndTime);
            lastEndTime = endtime;
            endtime = null;
            starttime = null;
        }

        function addRowToTable(starttime,endtime,lastEndTime)
        {

            formattedStart = PadDigits(starttime.getHours(),2)+':'+PadDigits(starttime.getMinutes(),2)+":"+PadDigits(starttime.getSeconds(),2);
            formattedEnd = PadDigits(endtime.getHours(),2)+':'+PadDigits(endtime.getMinutes(),2)+":"+PadDigits(endtime.getSeconds(),2);

            seconds = parseInt((endtime.getTime() - starttime.getTime())/1000);

            lengthMinutes = parseInt(seconds/60);
            lengthSeconds = parseInt(seconds%60);
            lengthFormatted = PadDigits(lengthMinutes,2)+":"+PadDigits(lengthSeconds,2);

            if(lastEndTime == null)
            {
                timeBetweenFormatted = "N/A";
            }
            else
            {
                timeBetween = parseInt((starttime.getTime() - lastEndTime.getTime())/1000);
                timeBetweenMinutes = parseInt(timeBetween/60);
                timeBetweenSeconds = parseInt(timeBetween%60);
                timeBetweenFormatted = PadDigits(timeBetweenMinutes,2)+":"+PadDigits(timeBetweenSeconds,2);
            }



            $('#history').prepend('<tr><td>'+formattedStart+'</td><td>'+formattedEnd+'</td><td>'+lengthFormatted+'</td><td>'+timeBetweenFormatted+'</td></tr>')
        }

        function toggleTimer()
        {
            if (starttime == null)
            {
                startTimer();
            }
            else
            {
                stopTimer();
            }
        }

        $(document).ready(function(){
            $('#action').click(function(kevent){
                toggleTimer();
            });

            $(document).keypress(function(kevent){
                $('#action').click();
            });
        });
    </script>

    <style type="text/css">
        body, body *{
            font-family: Helvetica;
        }
        body{
            margin:0px;
        }
        table.data-table
        {
            width: 100%;
            background-color: #FFFFFF;
            font-size: 11px ;
            border: 0px;
            border-collapse: collapse;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
        }
        table.data-table thead
        {
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
        }
        table.data-table thead th
        {
            background: #DDDDDD url(data-table-header.png) repeat-x top;
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(248, 248, 248)), color-stop(0.5, rgb(248, 248, 248)), color-stop(0.5, rgb(233, 233, 233)), to(rgb(233, 233, 233))) content-box padding-box;
            text-align: left;
            padding-left: 2px;
        }
        table.data-table tr:nth-child(2n)
        {
            background-color: #ECF3FE;
        }
        table.data-table tr:odd
        {
            background-color: #ECF3FE;
        }
        table.data-table td
        {
            padding-left: 2px;
        }
        table.data-table tbody
        {
            overflow-y: auto;
        }
        #action
        {
            border: 0px;
            background: transparent;
        }
    </style>
</head>
<body>
    <button type="button" id="action"><img src="play.png"><br>Start Timer</button><br>

    <div>
        <table class="data-table">
            <thead>
                <tr>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Length</th>
                    <th>Time Between</th>
                </tr>
            </thead>
            <tbody id="history">
            </tbody>
        </table>
    </div>
</body>
</html>

Answer 1

您可以使用最简单，最简单的解决方案

检查这个

http://www.w3schools.com/js/js_cookies.asp

Answer 2

如果必须将所有以前的值存储在本地存储中，则可以将对象数组存储到本地存储变量中，然后在页面加载时访问它。

目标是在一圈完成后将数据存储到本地存储中。在浏览器刷新时，它必须检查存储的圈数，如果有任何存储，它必须在继续之前在html上更新它们。这将有助于您实现它。

var rows = new Array();

var lastEndTime = null;
var starttime = null;
var endtime = null;

function stopTimer()
{
    // Your code
    addRowToTable(starttime,endtime,lastEndTime);
    addRowToLocalStorage(starttime,endtime,lastEndTime);
}

// This will update your local storage data with all time laps
function addRowToLocalStorage(starttime, endtime, lastendtime)
{
    var row = {
        'startTime' : starttime,
        'endtime' : endtime,
        'lastendtime' : lastendtime
    };
    rows.push(row);
    localStorage.setItem("savedData", JSON.stringify(rows));
}

// Onpage load, update all your local storage data to html
$(function(){
    var historyLaps = JSON.parse(localStorage.getItem("savedData"));
    $.each(historyLaps, function(lap) {
        addRowToTable(lap.starttime, lap.endtime, lap.lastEndTime);
    });
});

// Deletes the local data. You can keep a rest button in html and tie it to this.
function clearStorage(){
    localStorage.removeItem('savedData');
}

这是未经测试的代码，可能无法按预期工作。但是这会让你开始。我希望这会对你有所帮助。

浏览器刷新后，数据历史记录值将保留

2 个答案: