脱机数据与本地存储firestore Web应用程序同步

时间:2017-11-13 10:23:04

标签: javascript firebase firebase-realtime-database

我已经创建了一个简单的网页,可以在firebase数据库中保存和显示数据。我尝试了不同的时间使脱机缓存数据与fire base数据同步。但它不起作用。我附加了.html和.js文件。任何人都可以帮助我,一旦在断开应用程序后建立连接,本地存储缓存如何与火基数据同步?

var output = document.getElementById("data");
var dataText = document.getElementById("data-text");


var firebaseReference = firebase.database().ref('users/');

(function() {

    firebaseReference.on("value", function(snapshot) {
        output.innerHTML = JSON.stringify(snapshot.val(), null, 2);
    });
})();

$(document).ready(function(){
    $("form").submit(function(){
        firebaseReference.push().set({Name: dataText.value});
    });
});

var connectedRef = firebase.database().ref(".info/connected");

connectedRef.on("value", function(snap) {
    if (snap.val() === true) {
        alert("connected");
    } else {
        alert("not connected");
    }
});

<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <title>Firebase</title>
  </head>
  <body>
    <h1>Firebase  Example</h1>
    <h2>Add New</h2>
    <form action="" class="form-group">
      <input type="text" required id="data-text">
      <input type="submit" id="data-submit" class="btn btn-primary">
    </form>
    <h2>Existing Data</h2>
    <pre id='data'></pre>
    <script>
        var config = {
            apiKey: "AIzaSyBGKWHQlLok3q70Y6Q5CAzWyLbN4GyKnAQ",
            authDomain: "my-firebase-project-536a4.firebaseapp.com",
            databaseURL: "https://my-firebase-project-536a4.firebaseio.com",
            projectId: "my-firebase-project-536a4",
            storageBucket: "my-firebase-project-536a4.appspot.com",
            messagingSenderId: "711083146609"
        };

        firebase.initializeApp(config);

    </script>
    <script src="script.js"></script>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

您的代码正在使用Firebase Realtime Database,目前在其网络客户端中不支持磁盘持久性。 feature has been worked on in the open-source repo虽然还没有发布。

如果您希望对Web应用程序提供离线缓存支持,建议您使用内置此类支持的Cloud Firestore for Firebase