Javascript 是否将数据加载到本地存储中一次？

我使用的是backbone.js，我需要一种非常简单的方法将本地json文件一次性呈现到用户的本地存储中。我正在开发cordova应用程序，我只想处理本地存储数据

我已经将一个相当大的.json文件（玩家列表）硬编码到我的集合中，如果设备上的本地存储是空的，我只想将.json文件加载到本地存储中，而在应用程序初始化时，本地存储是空的

我可以使用ajax，但我不知道如何编写它，只将数据作为“起始”数据注入一次。因此，如果您知道如何做到这一点，我可以将json文件上传到我的服务器并以某种方式获取它

如果我执行一系列任务，我可以注入数据，我必须禁用

fetch

方法，并在下面的each语句中呈现此代码，加上json必须以特定格式硬编码到集合中

playersCollection.create({
  name: player.get('name'),
  team: player.get('team'),
  team_id: player.get('team_id'),
  number: player.get('number'),
  points: player.get('points')  
})

我正在努力完成这个lol我今晚需要用它来保存统计数据，我几乎在那里结构工作，当数据加载时我可以添加统计数据等，但我需要加载数据，我祈祷有人能帮助

编辑：我在最后一分钟整理了一些不整洁的代码，这些代码至少起了作用，多亏了@VLS，我将有一个更好的解决方案，但我会发布我使用的糟糕代码

// I fire renderData method on click
events: {
    'click .renderData':'renderData'
},

// Inside my render method I check if "players-backbone" is in local storage
render: function() {
    var self = this;

    if (localStorage.getItem("players-backbone") === null) {
        alert('yup null');
        //playersCollection.fetch();
        this.$el.append('<button class="renderData">Dont click</button>')
    } else {
        alert('isnt null');
        this.$el.find('.renderData').remove();
        playersCollection.fetch();
    }

    this.teams.each(function(team) {
        var teamView = new TeamView({ model: team });
        var teamHtml = teamView.render().el;

        console.log($(''))

        var teamPlayers = this.players.where({team_id: team.get('id')})

        _.each(teamPlayers, function(player) {
            var playerView = new PlayerView({ model: player });

            var playerHtml = playerView.render().el;
            $(teamHtml).append(playerHtml);

        }, this);

        this.$el.append(teamHtml);

    }, this);

    return this;
},

// method that populates local storage and fires when you click a button with the class .renderData
renderData: function() {
    var self = this;

    this.teams.each(function(team) {

        var teamPlayers = this.players.where({team_id: team.get('id')})

        _.each(teamPlayers, function(player) {

            playersCollection.create({
              name: player.get('name'),
              team: player.get('team'),
              team_id: player.get('team_id'),
              number: player.get('number'),
              points: player.get('points')  
            })

        }, this);

    }, this);

    playersCollection.fetch();

    return this;
}

//我在单击时激发renderData方法
活动：{
'click.renderData'：'renderData'
},
//在我的渲染方法中，我检查“玩家主干”是否在本地存储中
render:function（）{
var self=这个；
if（localStorage.getItem（“玩家主干”）==null）{
警报（'yup null'）；
//playerCollection.fetch（）；
此.$el.append（'不单击'）
}否则{
警报（'isnotnull'）；
这是.el.find（'.renderData'）.remove（）；
playerCollection.fetch（）；
}
这个。团队。每个（功能（团队）{
var teamView=newteamview（{model:team}）；
var teamHtml=teamView.render（）.el；
console.log（$（''）
var teamPlayers=this.players.where（{team\u id:team.get（'id'）}）
_.每个（团队成员、职能（球员）{
var playerView=新的playerView（{model:player}）；
var playerHtml=playerView.render（）.el；
$（teamHtml）.append（playerHtml）；
}，这个）；
此.$el.append（teamHtml）；
}，这个）；
归还这个；
},
//方法，该方法填充本地存储并在单击带有类.renderData的按钮时激发
renderData:函数（）{
var self=这个；
这个。团队。每个（功能（团队）{
var teamPlayers=this.players.where（{team\u id:team.get（'id'）}）
_.每个（团队成员、职能（球员）{
playersCollection.create({
名称：player.get（'name'），
团队：玩家。获取（“团队”），
team\u id:player.get（'team\u id'），
编号：player.get（'number'），
点数：玩家。获取（'points'）
})
}，这个）；
}，这个）；
playerCollection.fetch（）；
归还这个；
}

这显然不是最好的方法，但它奏效了，我当时非常匆忙。需要注意的是，你必须点击一个按钮来填充数据，收集是硬编码的，只是总体上不是很优雅（但它可以工作），应用程序做了它需要的

---

非常感谢@VLS，我感谢您为解释代码所做的努力，并创建了一个提琴。对不起，我迟到了

您可以扩展集合的

fetch

方法，并将其与Backbone.localStorage结合使用，因此在集合中您可以使用类似于：

localStorage: new Backbone.LocalStorage("TestCollection"),

fetch: function(options) {
    // check if localStorage for this collection exists
    if(!localStorage.getItem("TestCollection")) {
        var self = this;
        // fetch from server once
        $.ajax({
            url: 'collection.json'
        }).done(function(response) {
            $.each(response.items, function(i, item) {
                self.create(item);  // saves model to local storage
            });
        });
    } else {
        // call original fetch method
        return Backbone.Collection.prototype.fetch.call(this, options);
    }        
}

演示：

---

有关主干网.localStorage的更多信息：

您可以扩展集合的

fetch

方法，并将其与主干.localStorage结合使用，因此在集合中，您可以有如下内容：

localStorage: new Backbone.LocalStorage("TestCollection"),

fetch: function(options) {
    // check if localStorage for this collection exists
    if(!localStorage.getItem("TestCollection")) {
        var self = this;
        // fetch from server once
        $.ajax({
            url: 'collection.json'
        }).done(function(response) {
            $.each(response.items, function(i, item) {
                self.create(item);  // saves model to local storage
            });
        });
    } else {
        // call original fetch method
        return Backbone.Collection.prototype.fetch.call(this, options);
    }        
}

演示：

---

有关Backbone.localStorage的更多信息：

很抱歉这么晚才开始，这真的很有帮助，而且比我最后写的内容要好得多（请参阅）。我急于完成，我只是感谢它的成功，从长远来看，这段代码会更好。再次感谢。我们可以将此标记为已解决，但如果您不介意的话。。我不记得在文档中具体看到了在哪里放置

fetch

方法。如果它在集合中，这会更有意义，但我不小心将它放在了我的视图中（实际上我认为我看到了一个本地存储待办事项列表教程正在做这件事）。这可能是你的偏好？无论采用哪种方式，我都肯定会找到答案，我会记录fetch方法接受的参数。还是超级新，今天有很多东西要学。谢谢你，是的，这是你的收藏；检查小提琴是如何设置的。这样做的好处是，您可以在应用程序中继续使用

fetch

，而无需每次在视图中检查本地存储。很抱歉，这么晚才开始，这确实很有帮助，而且比我最后编写的内容（检查OP）要好得多。我急于完成，我只是感谢它的成功，从长远来看，这段代码会更好。再次感谢。我们可以将此标记为已解决，但如果您不介意的话。。我不记得在文档中具体看到了在哪里放置

fetch

方法。如果它在集合中，这会更有意义，但我不小心将它放在了我的视图中（实际上我认为我看到了一个本地存储待办事项列表教程正在做这件事）。这可能是你的偏好？无论采用哪种方式，我都肯定会找到答案，我会记录fetch方法接受的参数。还是超级新，今天有很多东西要学。谢谢你，是的，这是你的收藏；检查小提琴是如何设置的。这样做的好处是，您可以在应用程序中继续使用

fetch

，而无需每次在视图中检查localStorage。