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

Question

I'm creating an app that has a dashboard, this dashboard links to different HTML pages that do different stuff that requires updating my firebase database, with a single page app I can do this without issue, issue comes when I try to do it with multiple pages 我正在创建一个具有仪表板的应用程序，该仪表板链接到不同的HTML页面，这些页面执行不同的操作，需要更新我的Firebase数据库，而使用单页面应用程序我可以做到这一点而没有问题，当我尝试使用它时就会出现问题多页

When I try to connect to the database from dashboard_2.html it says that the app already exists (because I already called it from index.html from database.js), if I remove the configuration part from the js file and just let the modify part it says that no firebase app has been created. 当我尝试从dashboard_2.html连接到数据库时，它说该应用程序已经存在（因为我已经从database.js的index.html中调用了该应用程序），如果我从js文件中删除了配置部分，只是让修改它说没有创建firebase应用程序。

index.html 的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, where I connect to firebase 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 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, this is where i want to add info to the database manageusers.js，这是我要将信息添加到数据库的地方

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

If i copy what it is in database.js to manageusers.js and add var connect = database.ref("/users"); 如果我将database.js中的内容复制到manageusers.js并添加var connect = database.ref（“ / users”）; it tells me that the app already exists, if I don't it tells me that no firebase app was created, I want to use the same firebase database in both pages but I cannot do it this way, is there any way I can? 它告诉我该应用程序已经存在，如果我不知道它没有创建任何Firebase应用程序，则我想在两个页面中使用相同的Firebase数据库，但我不能这样做，有什么办法吗？

Answer 1

You need to prevent your app from initializing again. 您需要防止您的应用再次初始化。

Change firebase.initializeApp(firebaseConfig); 更改firebase.initializeApp(firebaseConfig); to 至

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

Answer 2

i think is normal , Firebase keeps the connection of the user until he/she logout. 我认为这很正常，Firebase会保持用户的连接状态，直到他/她注销为止。 what you can do it connect and then pass the data to other pages. 您可以做些什么，然后将数据传递到其他页面。 you can use the local storage to keep some basic information you may one to pass between the pages. 您可以使用本地存储来保存一些基本信息，以便您在页面之间传递。

Read more below. 在下面阅读更多内容。

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

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

问题描述

2 个解决方案

解决方案1
1 2019-05-08 03:16:31

解决方案2
0 2019-05-08 00:10:17

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

问题描述

2 个解决方案

解决方案1 1 2019-05-08 03:16:31

解决方案2 0 2019-05-08 00:10:17

解决方案1
1 2019-05-08 03:16:31

解决方案2
0 2019-05-08 00:10:17