处理渐进式Web应用程序中的firebase实时更改

时间:2017-06-03 17:45:02

标签: javascript firebase local-storage

我正在从使用firebase的黑客新闻API中获取最新消息。我打算建立一个渐进式网络应用程序,因此,我打算将结果缓存到本地存储中。

当前代码为here,用于获取和呈现热门故事。代码在这里:

var ref = new Firebase("http://hacker-news.firebaseio.com/v0/");
var itemRef = ref.child('item');

var topStories = [];

var storyCallback = function(snapshot) {
    var story = snapshot.val();
    var html = '';

    if(story.score) {
        html = '<i>'+story.score+'</i> <a href="'+story.url+'" id="article_a">'+story.title+'</a>'      
    }

    document.getElementById(topStories.indexOf(story.id)).innerHTML = html;    
}

ref.child('topstories').once('value', function(snapshot) {
    topStories = snapshot.val();

    for(var i = 0; i < topStories.length; i++) {
        var element = document.createElement("P");          
        element.id = i;
        document.getElementById('items').appendChild(element);

        itemRef.child(topStories[i]).on('value', storyCallback);
    }
});

ref.child('topstories').on('child_changed', function(snapshot, prevChildName) {
    var ref = snapshot.ref()
    var index = ref.name();

    var oldItemId = topStories[index];
    itemRef.child(oldItemId).off();

    var newItemId = snapshot.val(); 

    topStories[index] = newItemId
    itemRef.child(newItemId).on('value', storyCallback);
});

如果我将每个故事添加到本地存储中(通过调整上面的代码),我怎样才能跳过下次从firebase中获取它(如果它已经存在且未更改)?

请注意,不更改部分非常重要,因为我可以使用密钥轻松地从本地存储中获取,但它也应该与firebase同步。所以想知道firebase是否有办法处理这个

1 个答案:

答案 0 :(得分:0)

如果我没有遗漏任何一点,你可以简单地检查它们是否已经存在于本地存储中

if(localStorage.getItem('key')){
 //display here
 }else{

//fetch 
//save for next time
localStorage.setItem('key', JSON.stringify('yourdata'));
 //and display here
}

此外,您可以将您的功能概括为提取,显示或渲染,以便您可以在多个地方进行呼叫。