Как хранить входные данные с веб-страницы в автономном режиме - PullRequest
Новая
       22

Как хранить входные данные с веб-страницы в автономном режиме

0 голосов
/ 03 июля 2019

Я хочу сохранить входные данные с моей веб-страницы.Когда я в сети, данные хранятся в базе данных, но я также хочу, чтобы входные данные были сохранены, когда я использую страницу в автономном режиме.Входные данные содержат несколько кнопок ввода, поле для комментариев и отметку текущего времени.Когда я подключаюсь к Интернету, я хочу загрузить данные в базу данных.У вас есть идея, как это сделать?Я думал о манифесте chache?Или, может быть, сохранить данные со страницы в текстовом файле, а затем загрузить их в БД.

Надеюсь, вы мне поможете:)

1 Ответ

0 голосов
/ 03 июля 2019

Один из вариантов - использовать 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>
...