当 Webview 中的 Internet 不可用时，如何缓存 Json 数据以供离线查看答案

【问题标题】：How to cache Json Data for to view offline when Internet is not availaible in Webview当 Webview 中的 Internet 不可用时，如何缓存 Json 数据以供离线查看
【发布时间】：2018-03-26 09:36:32
【问题描述】：

我正在使用 Json Data 来填充我的 html 表，并且我已将这些 html 页面添加到 assets 文件夹中以供离线使用。在 Html 文件中，我包含了由 Json 数据填充的行和列的表。

我希望能够在 Internet 不可用时缓存 Json Data for Offline 视图，并在新的 Json 数据可用时覆盖现有数据。

有什么解决方案吗？

我的 index.html 包括

<!DOCTYPE html>
<html>
<head>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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(){
	$.getJSON("https://api.myjson.com/bins/8qktd", function(data){
	var employee_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 文件包括

[

    {
    "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"
}

]

我的 Webview 包含代码，

       
        mywebview.getSettings().setJavaScriptEnabled(true);
        mywebview.setWebViewClient(new WebViewClient());
       WebView mywebview = (WebView) findViewById(R.id.webView1);
        mywebview.loadUrl("file:///android_asset/index.html");

【问题讨论】：

标签： javascript android html json android-studio

【解决方案1】：

如果您可以使用本地存储，请将每个接收到的 json 保存在本地存储中，并在页面加载时使用本地存储 json 填充表格。然后，如果互联网已连接，请使用在线 jason 数据填写表格。

要将 json 文件保存在本地存储中，您可以这样做：

$(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= '';  // empty employee_data

  $.getJSON("https://api.myjson.com/bins/8qktd", function(data){
      $("#yourtableid tbody").remove();    // Empty table before filling it with new data

      localStorage.setItem(myJSON, JSON.stringify(data)); // Save new data in localStorage
      $.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);

  });

});

【讨论】：

非常感谢您的反馈。正如您所建议的那样，我是否需要将 data=localStorage.myJSON 放在 Main 活动的 OnCreate 中？ .最重要的是，我猜您提供的解决方案将加载存储在本地存储中的 JSON 文件。现在，当 Internet 可用时，我可以通过哪种方法使用在线 Json 数据填充 html 表？这会覆盖以前存在的 Json 数据吗？我对编码真的很陌生，到目前为止我学到的所有东西都是从示例和 youtube 中获得的......如果我搞砸了，很抱歉。
首先我应该说这是一种网络方法；我不确定它是否适用于移动应用程序。我更新了代码。如您所见，我首先检查 localStorage.myJSON 是否未定义。如果 myJSON 存在，那么我用它填充页面的表格。然后我发送 getJSON 请求；如果有互联网连接，通过接收在线 json 数据，它会清空表并用新接收到的 json 数据填充它。它还将新数据保存在 localStorage 中。
我一定会试一试，我会告诉你它是否有效（请上帝，让它工作）。最后一个问题，有什么方法可以在 html 页面中添加一个按钮并 onClick 它会使用新的 Json 数据更新表格并显示消息对话框“表格已更新”，如果本地存储 JSON 和在线 JSOn 都相同，然后返回“您的表是最新的”。如果可以的话，我会很幸运的。
如果我编写的代码有效，那么添加您想要的新代码将很容易。您需要做的就是将该 $.getJSON 放入一个新函数中并在按钮 onclick 中调用该函数。并使用您的本地存储数据检查收到的答案以显示适当的消息。
好的，我会期待它，并考虑我之前在 index.html 的同一目录中存储了一个名为 example.json 的 Json 文件。所以代替 localStorage.myJSON 即 myJSOn 我应该用 example.json 或 example 替换它，或者我应该怎么做？？

【解决方案2】：

首先定义变量，而不是直接将检索到的数据放入 html 元素中，如果 json 数据不为空，则将这些数据保存到这些变量中，如果它为空，则这些变量应该显示之前保存的数据或您可以事先设置的默认数据。

【讨论】：

我真的很抱歉，但我对编码领域真的很陌生，到目前为止我学到的一切都是从 youtube 频道和示例中获得的，慢慢地我开始明白......你什么已经说过了。我真的很感激并会帮助我
@Ashkan，最后一个问题代码本身是否会创建一个名为 myJSON 的新文件并将其保存在同一目录中并在将来从该文件中加载它，或者我应该先保存名为 myJSON 的 JSON 文件并将其保存在同一目录中？