Как я могу перезагрузить мою страницу, потеряв диаграмму внутри холста?

Question

У меня есть следующий код:

<div id='info_e1' style="display: inline_block" ></div> 
    <script> 
     (function($){ 
      $(document).ready(function(){   
       var $container = $("#info_e1"); 

       $container.load('getinfo.php'); 
       var refreshId = setInterval(function(){ 
        var $ctx = $("#canvas-e1")[0].getContext('2d'); 
        console.log($ctx); 
        $container.load('getinfo.php'); 
        $('#chart-e1').append($ctx); 
       }, 5000); 
      }); 
     })(jQuery); 
    </script> 

Итак, getinfo.php возвращает таблицу с данными из SQL запроса в базе данных. В моем PHP коде элемент холст вставляется:

echo " <td rowspan='10'> 

<div> 
    <div id='chart-e1'> 
     <canvas id='canvas-e1' ></canvas> 
    </div> 
</div> 

</td>"; 

Скажем, у меня есть график, сделанный в элементе холста, проблема заключается в том, что через 5 секунд, когда ДИВ перезагружается мой также удаляется. Есть ли способ сохранить содержимое с холста и добавить его обратно на холст при перезагрузке?

Answer 1

Не перезагружайте диаграмму вообще. Или используйте локальное хранилище для хранения результатов getinfo.php для последующего повторного использования.

Here вы можете проверить, поддерживает ли ваш целевой браузер локальное хранилище или нет.