主干js演示案例无法与堆栈片段中添加的localstorage一起使用

Question

我正在尝试使用 stack sn-p 工具将现场演示案例嵌入到我的帖子中。但是我发现当我在演示案例中添加 localstorage 功能时，它不能正常工作。
因此，我将问题简化为基本骨干案例，以强调上述本地存储问题。
而且如果我去掉localstorage流，demo可以很好的运行，但是如果加上localstorage，就不能正常运行了。来自控制台的错误消息说 Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.

有什么想法吗？

// A simple case

var Daymodel = Backbone.Model.extend({
	defaults : {
		day: 1,
	}
});

var DayCollection = Backbone.Collection.extend({
	model: Daymodel,
	localStorage: new Backbone.LocalStorage("test-simple")
});


// The view for each day panel
var DayView = Backbone.View.extend({
	tagName:"div",
	template: _.template( $('#eachday-template').html() ),
	initialize: function() {
		this.listenTo(this.model, "change", this.render);
	},	
	render: function(){
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	}
});
// The view for the entire application
var AppView = Backbone.View.extend({
  el: $('#todoapp'),
  events: {
	"click #add-firebase":"addToLocalhost"
  },
  initialize: function() {
    this.daylist = this.$("#container"); // the daylist to append to
    this.listenTo(this.collection, 'add', this.addOne);
	this.collection.fetch();
  },

  addOne: function(todo) {
	var view = new DayView({model:todo});
    this.daylist.append(view.render().el);

  },
  addToLocalhost: function(){
	this.collection.create({
		day : this.collection.length + 1,
	});
  }

});

// Create a function to kick off our BackboneFire app
function init() {
  // The data we are syncing from our remote Firebase database
  var collection = new DayCollection();
  var app = new AppView({ collection: collection });
}
// When the document is ready, call the init function
$(function() {
  init();
});

<div id="todoapp">
  <div id="container"></div>
  <button id="add-firebase">Add to Localstorage</button>
</div>
<script type="text/template" id="eachday-template">
	<h3 class="which-day"> day <%= day %></h3>
    <ul id="todo-list"></ul>
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js">
</script>

Answer 1

答案在您收到的错误消息中：“文档已被沙盒化”。您不能乱用 localStorage，因为它是所有沙盒 iframe 文档的受限功能除非特别解除限制。

如果您查看页面源代码，您会看到 iframe 和 sandbox 属性选项。

<iframe name="d62428c9-4eba-3156-6ef7-8815d959a281" 
        sandbox="allow-modals allow-scripts" 
        class="snippet-box-edit" frameborder="0">

更多详情请见Play safely in sandboxed IFrames。

框架文档被加载到一个唯一的原点，这意味着 所有同源检查都将失败；独特的起源无与伦比 永远的起源，甚至不是他们自己。除其他影响外，这意味着 文档无权访问存储在任何来源的 cookie 中的数据 或任何其他存储机制（DOM 存储、索引数据库等）。

[...]

除了插件之外，这些限制中的每一个都可以 通过向沙盒属性的值添加标志来解除。沙盒化 文档永远不能运行插件，因为插件是非沙盒原生的 代码，但其他一切都是公平的游戏：

• allow-forms 允许提交表单。
• allow-popups 允许弹出窗口（@98​​7654331@、showModalDialog()、target="_blank" 等）。
• allow-pointer-lock 允许（惊喜！）指针锁定。
• allow-same-origin 允许文档保持其来源；从https://example.com/ 加载的页面将保留对该页面的访问权限 来源的数据。
• allow-scripts 允许 JavaScript 执行，还允许自动触发功能（因为它们实现起来很简单 通过 JavaScript）。
• allow-top-navigation 允许文档通过导航顶级窗口跳出框架。

对于allow-modals，Add allow-modals to the sandbox of Stack Snippets 提供更多详细信息：

铬blocks modal dialogs such as alert, confirm and prompt in sandboxed iframes unless allow-modals is set。这种行为成为 默认为Chrome 46 and Opera 34。