如何在多个HTML页面中使用相同的Firebase数据库?

时间:2019-05-07 22:43:14

标签: javascript html firebase firebase-realtime-database

我正在创建一个具有仪表板的应用程序,该仪表板链接到执行不同内容的不同HTML页面,这些页面需要更新我的Firebase数据库,而使用单页应用程序我可以做到这一点而没有问题,当我尝试多页处理

当我尝试从dashboard_2.html连接到数据库时,如果我从js文件中删除了配置部分,只是说该应用程序已经存在(因为我已经从database.js的index.html中调用了该应用程序)让修改部分说没有创建Firebase应用。

index.html

    <script src="https://www.gstatic.com/firebasejs/ui/3.6.1/firebase-ui-auth__es.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/3.6.1/firebase-ui-auth.css" />
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <!-- Add additional services that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-functions.js"></script>



    <!-- Firebase -->
    <script src="js/database.js"></script>

</head>

    <body>
    <div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
    <ul class="nav metismenu" id="side-menu">

    <!-- User admining -->
    <li><a href="dashboard_2.html">users</a></li>
    </ul>
</div>
</div>

database.js,我连接到Firebase

var firebaseConfig = {
  apiKey: "AIzaSyBWVRTc7stMysJVw4rjvzzn5-FnvMAE8_8",
  authDomain: "proveneet.firebaseapp.com",
  databaseURL: "https://proveneet.firebaseio.com",
  projectId: "proveneet",
  storageBucket: "proveneet.appspot.com",
  messagingSenderId: "37090380224",
  appId: "1:37090380224:web:a9e4c49d1e4b80bf"
};
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  var database = firebase.database();

dashboard_2.html

 <!--===============================================================================================-->
        <script src="https://www.gstatic.com/firebasejs/ui/3.6.1/firebase-ui-auth__es.js"></script>
        <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/3.6.1/firebase-ui-auth.css" />
        <!-- The core Firebase JS SDK is always required and must be listed first -->
        <!-- Add additional services that you want to use -->
        <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-messaging.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-functions.js"></script>


        <!-- Firebase -->
        <script src="js/manageusers.js"></script>

    </head>

    <body>
            <div id="wrapper">
            <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">

            <li class="active"><a href="dashboard_2.html">users</a></li>
        </ul>
</div>
</div>



<button class="btn btn-primary btn-lg float-right" type="submit" id="addusr">Next</button>

manageusers.js,这是我要将信息添加到数据库的地方

var connect = database.ref("/users");

如果我将database.js中的内容复制到manageusers.js并添加var connect = database.ref(“ / users”);它告诉我该应用程序已经存在,如果我不知道它没有创建任何Firebase应用程序,则我想在两个页面中使用相同的Firebase数据库,但我不能这样做,有什么办法吗?

2 个答案:

答案 0 :(得分:0)

我认为这很正常,Firebase会保持用户的连接状态,直到他/她注销为止。您可以做些什么,然后将数据传递到其他页面。 您可以使用本地存储来保存一些基本信息,以便您在页面之间传递。

在下面阅读更多内容。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

答案 1 :(得分:0)

您需要阻止您的应用再次初始化。

firebase.initializeApp(firebaseConfig);更改为

if (!firebase.apps.length) {
    firebase.initializeApp(config);
}