Question

我使用来自Internet服务器的Json Data填充html表，并且我将名为example.json的json文件放在放置index.html的同一文件夹中。如果Internet可用，我想加载json文件并从Online Server填充html表，如果服务器中的json文件有新的更改，并且当Internet不可用时从本地存储加载，则还会覆盖example.json文件中的先前数据

Ps：我已经在同一目录中添加了所有css和js库。

到目前为止，我正在使用以下代码来处理我的HTML

<head>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>



</head>

<body>
  <div class="container">

    <div class="table-responsive">
      <h1>Json</h1>
      <br/>

      <table class="table table-bordered table-striped" id="employee_table">
        <tr>
          <th>Class</th>
          <th>Time</th>

        </tr>
      </table>
    </div>
  </div>

</body>

</html>
<script>
  $(document).ready(function() {
    var employee_data = '';
    if (localStorage.myJSON !== undefined) {
      var myJSON = JSON.parse(localStorage.myJSON);
      employee_data += '<tbody>';
      $.each(myJSON, function(key, value) {
        employee_data += '<tr>';
        employee_data += '<td>' + value.class + '</td>';
        employee_data += '<td>' + value.time + '</td>';

        employee_data += '</tr>';
      });
      employee_data += '</tbody>';
      $('#employee_table').append(employee_data);
    }

    employee_data = '';

    $.getJSON("https://api.myjson.com/bins/8qktd", function(data) {
      $("#yourtableid tbody").remove();

      localStorage.setItem(myJSON, JSON.stringify(data));
      $.each(data, function(key, value) {
        employee_data += '<tr>';
        employee_data += '<td>' + value.class + '</td>';
        employee_data += '<td>' + value.time + '</td>';

        employee_data += '</tr>';
      });
      $('#employee_table').append(employee_data);

    });

  });
</script>

我的Json文件是

var myJSON= [

    {
    "id":"1",    
    "time":"10-15",
    "class":"John Smith"
    
},
{


    "id":"2",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"3",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"4",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"5",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"6",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"7",
  "time":"10-15",
    "class":"John Smith"
},
{


    "id":"8",
   "time":"10-15",
    "class":"John Smith"
},

{

    "id":"9",
   "time":"10-15",
    "class":"John Smith"
},

{
    "id":"10",
    "time":"10-15",
    "class":"John Smith"
},
{


    "id":"11",
    "time":"10-15",
    "class":"John Smith"
},

{

    "id":"12",
    "time":"10-15",
    "class":"John Smith"
}

]

接下来的事情是放置一个按钮，OnClick将从服务器获取jjson文件并与本地存储进行比较，如果两者相同，则显示带有文本“您的数据是最新日期”的消息框，否则显示“请更新您的表格并显示消息框上的更新按钮，它将刷新页面，因此将使用新数据加载表，并覆盖本地存储中的旧数据“

有可能，我期待不可能。

任何帮助??

当Internet不可用时，从本地存储中读取JSON文件

0 个答案: