Firebase to localStorage

Firebase to localStorage

本文关键字：localStorage to Firebase      更新时间：2023-09-26

我想将一个对象作为JSON字符串保存到本地存储中，以便离线渲染。此时只希望写入函数进行测试。我的问题是，为什么只有一个键/值字符串（数组）写入localStorage？

我尝试过的

这是我要保存的对象。

Addr_states
 -JhMZ6QjAm0FRAcRjivP
 Country: 
 State: 
 -JhMdqTXuayd00hqkp_E
 Country: 
 State: 
 -JhMgVVy_58upfBjf0sO
 Country:  
 State: 
 -JhMjte-ujgsmxgyX8Zf
 Country: 
 State: 
 -JhMkPrScGjvRNVna4Hp
 Country: 
 State: 
 -JhOYj6j4lW4Y38wJDsN
 Country: 
 State:

这是我迄今为止的代码：

function myDataStore (myDataPass)
                    {localStorage.setItem("States", JSON.stringify(myDataPass));}
if (myStorageStatus == true)
{
    if (myOnlineStatus == false)
    {
        myDataSource = "Local Storage";
    }
    else
    {
        myDataSource = "Web Firebase";
        localStorage.removeItem("States");
        var myDataRead = new Firebase('https://myappURL/Addr_states');
        myDataRead.on('child_added', function(snapshot) {
            myDataGroup = snapshot.val();
            console.log(myDataGroup);
            myDataStore (myDataGroup);
        });

    }
}

备注

  • 当将变量myDataGroup的强制转换拉入快照函数时，我会将最后一个键/值数组作为一个字符串获取，而不包含上次更新的键（如上图所示）或元数据。在函数之外，结果（在开发人员控制台中）显示为一个空对象。

  • myDataGroup是在代码块的顶部声明的，在函数的作用域之外。

  • 更改为添加以下评论建议的代码-生成单个字符串（数组）最后一个在州-此-{"国家"："美国"，"州"："犹他州"}

您的代码正在响应child_added事件：

var myDataRead = new Firebase('https://myappURL/Addr_states');
myDataRead.on('child_added', function(snapshot) {

为添加到指示节点下的每个子节点激发child_added事件。因此，在您的情况下：每个状态都会触发一个child_added事件。

这也意味着您的回调函数将针对每个状态调用。然后用该状态的信息覆盖本地存储中的任何内容：

myDataStore (myDataGroup);

因此，基本上，您的本地存储现在将包含来自Firebase的上一个状态。

假设您将本地存储命名为States，那么您似乎希望将所有状态存储在其中。这可以通过监听Firebase的value事件来最容易地实现：

var myDataRead = new Firebase('https://myappURL/Addr_states');
myDataRead.on('value', function(snapshot) {
    myDataGroup = snapshot.val();
    console.log(myDataGroup);
    myDataStore (myDataGroup);
});

如果您还想在各个状态上循环，可以使用forEach:

var myDataRead = new Firebase('https://myappURL/Addr_states');
myDataRead.on('value', function(allStates) {
    allStates.forEach(function(stateSnapshot) {
        console.log(stateSnapshot.val());
    });
});
相关文章：