一种在离线应用程序中存储数据的方法答案

【问题标题】：A method to store data in an offline application一种在离线应用程序中存储数据的方法
【发布时间】：2015-01-14 12:53:15
【问题描述】：

目前我为手机和电脑创建的这个应用程序可以离线存储数据。例如，用户可以在一个框中输入数据，单击保存按钮，关闭他的互联网并加载刚刚存储的数据以供离线使用。我想改进这个功能，这样它就会列出来自任何网站的离线新闻文章，我不在乎它是什么网站，只要它显示新闻文章供离线使用。关于做什么的任何想法？

这里是 HTML

<!DOCTYPE html>
<html manifest="offline.manifest">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Offline test page</title>
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
</head>
<body>

<p id="status">Online</p>

<h1>Off-line test page</h1>
<p>This page detects when the browser goes off-line and stores data locally.</p>

<form id="mainform" action="index.html" method="post">
<fieldset>
<legend>Update data</legend>

<label>Data item 1: <input type="text" id="data1" name="data1" value="" /></label>

<button type="submit">Save Data</button>

</fieldset>
</form>

<p>Use File &gt; Work Offline in Firefox to switch online/offline modes.</p>
<p><a href="index.html">Refresh the page</a> in offline mode to reload data from store.</p>


<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="offline.js"></script>

</body>
</html>

这里是 Javascript

// page loaded
jQuery(document).ready(function($) {

    // form data saving
    $("#mainform").submit(lib.Save);

    // online/offline event handler
    if (window.sessionStorage) {
        lib.Net.ChangeStatus();
        $(window).bind('online offline', lib.Net.ChangeStatus);
    }

    // load data
    lib.Load();

});

// online/offline library
var lib = lib || {};

lib.Net = function() {

    var online = true;

    // is browser online?
    function Online() { return navigator.onLine; }

    // online/offline event
    function ChangeStatus() {
        if (online != Online()) {
            online = Online();
            var s = $("#status");
            s.text(online ? "Online" : "Offline");
            if (online) s.removeClass("offline");
            else s.addClass("offline");
        }
    }

    return {
        Online: Online,
        ChangeStatus: ChangeStatus
    };

}();

// save data online or offline
lib.Save = function(e) {

    e.preventDefault();

    if (lib.Net.Online() || !window.sessionStorage) {

        // save data online
        alert("Data has been saved online.");

    }
    else {

        // save data offline
        $("#mainform input").each(function(i) {
            window.sessionStorage.setItem(this.id, this.value);
        });
        alert("Data has been saved offline.");

    }

};

// load data online or offline
lib.Load = function() {

    if (lib.Net.Online() || !window.sessionStorage) {

        // load data online
        alert("Currently online:\ndata could be loaded from server.");

    }
    else {

        // load data offline
        $("#mainform input").each(function(i) {
            this.value = window.sessionStorage.getItem(this.id);
        });
        alert("Data has been loaded from offline store.");

    }

};

【问题讨论】：

标签： javascript android html offline

【解决方案1】：

你想做的是制作一个像 Pocket 这样的应用程序吗？

您需要以 html/css 样式或其他格式（如 pdf 文件）保存来自不同网站的文章。获取 html/css 并保存或将其转换为 pdf 并保存 pdf。之后你就可以加载它了。

您必须使用 LocalDB 或类似的工具来保存指向已保存文件的链接。

【讨论】：

LocalDB 是 Microsoft SQL Server 的一项功能，因此在客户端 Web 应用程序中不可用。客户端应用程序会使用 IndexedDB 或 localStorage 之类的东西进行离线存储。