Question

我在〜/ test.html上的本地文件上有以下html：

<html>
  <head>
    <title>Test Event</title>
  </head>
  <body>
    Test Event
  </body>
</html>

我在Chrome（版本62.0.3202.75）的两个不同窗口中打开它。在第一个窗口的控制台中，我输入以下JS：

window.addEventListener('storage', function(e) {  
    console.log('criou sdasd');
    console.log(e.key);
    console.log(e.oldValue);
    console.log(e.newValue);
    console.log(e.url);
    console.log(e.storageArea);
});

在第二个窗口的控制台中，我输入以下JS：

localStorage.setItem('Chronometer.time', '00:00');

第一个窗口没有任何反应。

有趣的事实：

如果我在第一个窗口的控制台上运行localStorage.getItem('Chronometer.time')，我会“00:00”。
如果我只打开两个新的空Chrome浏览器并执行上述相同步骤，我会在第一个窗口中触发一个事件。

存储事件是否适用于本地html文件？

Answer 1

Chrome会阻止本地文件（--allow-file-access-from-files）与＃34;谈话＆＃34;默认情况下相互之间作为安全措施。您可以通过使用chrome.exe --allow-file-access-from-files标记启动Chrome来禁用此限制：

var AppView = Backbone.View.extend({
    events: {
        'click #btnAdd': function() {
            alert('Add');
        }
    },
    initialize: function() {
        _.bindAll(this, 'render');
        this.render();
    },
    render: function() {
        var template = _.template($('#myApp').html());
        this.$el.html(template);
    }
});

var myApp = new AppView({
    el: '#container'
});

$('#showPopup').webuiPopover({
    width: '500px',
    height: 'auto',
    padding: true,
    trigger: 'click',
    closeable: true,
    delay: 200,
    placement: 'right-bottom',
    animation: 'sticky',
    dismissable: true,
    onShow: function() {
        console.log(this);
    },
    content: '<div>' + 
        Popop + '<br /><input type="button" value="Add" id="btnAdd"/></div>'
});

现在，存储事件应该按预期使用本地文件。

存储事件未在Chrome中的本地html文件中触发

1 个答案: