javascript - SessionStorage，只获取最后的值

Question

我有包含此函数和代码的 PHP 文件:

<?php
   $valuesNight = select_sensor_data7($db, $idSensor, $date22y, $date6t);
    chart_line($valuesNight);

    $valuesEvening = select_sensor_data7($db, $idSensor, $date6t, $date14t);
    chart_line($valuesEvening);   
  ?>

<?php function chart_line($values7){ ?>
<div>
    <script type="text/javascript">

        var values7 = <?php echo $values7 ?>;
        var value7 = new Array;
        var time7 = new Array;

        for(var o in values7) {
            value7.push(values7[o]['dValue']);
            time7.push(values7[o]['dTimeDate']);
        }
        //alert(time7);
        // store values
        sessionStorage.setItem('myValues', JSON.stringify(value7));
        sessionStorage.setItem('myTime', JSON.stringify(time7));
    </script>

    <object type="text/html" data="chart.htm" width="100%"  height="420"></object>
</div>
<?php } ?>

和select_sensor_data7()

function select_sensor_data7($db, $idSensor, $dateFrom, $dateTo){
$stmt = $db->prepare("SELECT * FROM sensorData WHERE _idSensor = :idSensor 
                        AND dTimeDate BETWEEN :dateFrom AND :dateTo ORDER BY dTimeDate");
    $stmt->execute(array(':idSensor' => $idSensor, ':dateFrom' => $dateFrom, ':dateTo' => $dateTo));
    $row2 =$stmt->fetchAll(PDO::FETCH_ASSOC);
    $json=json_encode($row2);
return $json;
}

在 chart.htm 中:

<script type="text/javascript">
    var myTime = JSON.parse(sessionStorage.getItem('myTime'));
    var myValues = JSON.parse(sessionStorage.getItem('myValues'));

    alert(myTime);

问题: select_sensor_data7 返回具有日期之间的值和时间的对象，chart_line($valuesNight) 和 chart_line($valuesEvening) 运行函数。在函数 chart_line($values7) alert(time7) 中显示正确的值，但在 chart.htm 中我只得到最后的值 valuesEvening.

我哪里做错了？

Answer 1

在我继续之前，请考虑使用良好的命名约定，像 select_sensor_data7 这样的函数和像 values7 这样的变量都是糟糕的选择。

话虽如此；它看起来像 select_sensor_data7 函数返回一个 json_encoded 对象数组，即像这样的东西(虚拟数据):

[
    {"dValue": "123", "dTimeDate": "00/00/0000"},
    {"dValue": "123", "dTimeDate": "00/00/0000"},
    {"dValue": "123", "dTimeDate": "00/00/0000"}
]

那么，您可以在 PHP 函数中执行的操作是:

<?php

$valuesNight = select_sensor_data7($db, $idSensor, $date22y, $date6t);
chart_line('night', $valuesNight);

$valuesEvening = select_sensor_data7($db, $idSensor, $date6t, $date14t);
chart_line('evening', $valuesEvening);   

?>

<?php function chart_line($chartId, $jsonDataSource) { ?>
<div>
    <script type="text/javascript">

        var dataSource = JSON.parse('<?php echo $jsonDataSource ?>');
        var dValues = new Array;
        var dTimeDate = new Array;

        for (var i = 0; i < dataSource.length; i++) {
            dValues.push(dataSource[i].dValue);
            dTimeDate.push(dataSource[i].dTimeDate);
        }

        sessionStorage.setItem($chartId .'_myValues', JSON.stringify(dValues));
        sessionStorage.setItem($chartId .'_myTime', JSON.stringify(dTimeDate));

    </script>

    <object type="text/html" data="chart.htm?chartId=<?php echo $chartId ?>" width="100%"  height="420"></object>
</div>
<?php } ?>

然后像这样更新您的 chart.html:

<script type="text/javascript">

// http://stackoverflow.com/a/901144/2332336
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// Parse chartId
var chartId = getParameterByName('chartId', location.href);

// Proceed if you have a chart id
if (typeof chartId !== 'undefined' && chartId && chartId.length > 0)
{
    var myTime = JSON.parse(sessionStorage.getItem(chartId +'_myTime'));
    var myValues = JSON.parse(sessionStorage.getItem(chartId +'_myValues'));

    // TEST
    console.log('myTime', myTime);
    console.log('myValues', myValues);
}
else
{
    alert('error - invalid chart id');
}

</script>

附言未经测试，如果您在运行时遇到问题，请告诉我。