如何离线存储来自网页的输入数据答案

【问题标题】：How to store input data from web page offline如何离线存储来自网页的输入数据
【发布时间】：2019-11-14 10:38:27
【问题描述】：

我想从我的网页存储输入数据。当我在线时，数据存储在数据库中，但我还希望在我离线使用页面时存储输入数据。输入数据包含一些输入按钮、一个注释框和当前时间戳。当我连接到 Internet 时，我想将数据上传到数据库。你知道怎么做吗？我想到了一个chache清单？或者也许将页面中的数据存储在文本文件中，然后将其上传到数据库。

我希望你能帮助我:)

【问题讨论】：

标签： php html caching manifest browser-cache

【解决方案1】：

一种选择是使用 Javascript 保存到浏览器的LocalStorage。即使您关闭浏览器的窗口，您的数据也将保存在本地，没有过期日期。

用法很简单：

var user = {
    username: "john.doe",
    email: "john.doe@mail.com"
}

window.localStorage.setItem('user', JSON.stringify(user));

实现它的一种方法可能是（使用 JQuery）。我无法测试这段代码现在是否有效，但我相信你能明白：

我正在使用 Javascript 的 navigator.online 来检查连接性。

profile.html

<html>
    <body>
        <form action="save_profile.php">
            Name:<br>
            <input type="text" name="name">
            <br>
            Email:<br>
            <input type="text" name="email">
            <br><br>
            <input type="submit" value="Save" onclick="validate()">
        </form> 
    </body>
</html>

<script>
    $(document).ready(function() {
        //This synch can be executed on every page
        var needsSynch = window.localStorage.getItem('needs_synch');
        if (needsSynch) {
            synchronizeOfflineData();
        }

        function synchronizeOfflineData()
        {
            var userData = JSON.parse(window.localStorage.getItem('user_data'));

            $.ajax({
                url : "save_profile.php",
                type : 'post',
                data : {
                     nome : userData.name,
                     email : userData.email
                }, 
                success: function(result){
                    window.localStorage.setItem('needs_synch', false);
                    window.localStorage.removeItem('user_data');
                } 
            });
        }

        function validate()
        {
            //submit form if you are offline
            if (window.navigator.online) {
                return true;
            }

            saveToLocalStorage();
            window.top.location= = "http://yourdomain.com/offline_success_page.html";
        }

        function saveToLocalStorage()
        {
            var userData = {
                name: $('input[name=name]').value,    
                email: $('input[name=email]').value    
            };
            //a flag to indicate that there is data waiting to synchronize when online
            window.localStorage.setItem('needs_synch', true);
            window.localStorage.setItem('user_data', JSON.stringify(userData));
        }  
    });
</script>

【讨论】：

感谢您的回复。我应该把它复制到我的 php 文件中吗？上线后如何将数据发送到数据库？
@Astra-Joe 我用一个完整的例子编辑了答案。希望对你有帮助
非常感谢代码！我会试试然后给你答案