Fatal编程技术网
  • javascript/
  • Javascript IE11没有'；t在值太大时触发本地存储事件

Javascript IE11没有'；t在值太大时触发本地存储事件

javascript

Javascript IE11没有'；t在值太大时触发本地存储事件,javascript,local-storage,internet-explorer-11,Javascript,Local Storage,Internet Explorer 11,我有一个使用localStorage事件的应用程序。一个窗口写入存储器，另一个窗口作出反应。这几个月来一直运行良好，在Chrome、FF和IE10上仍然如此，但自从我的用户开始使用IE11以来，它偶尔会中断 经过深入调查，我发现IE11仅当新值中的字符数低于某个数字（根据我的测量值为4282）时才会触发存储事件。 此外，如果同一个键下已经有一个值，IE将仅在旧值和新值的大小一起低于该限制时触发事件 一个重要注意事项是：在所有情况下，值都会写入存储器。在任何阶段都不会超过存储大小 这是一个小代码示

我有一个使用localStorage事件的应用程序。一个窗口写入存储器，另一个窗口作出反应。这几个月来一直运行良好，在Chrome、FF和IE10上仍然如此，但自从我的用户开始使用IE11以来，它偶尔会中断

经过深入调查，我发现IE11仅当新值中的字符数低于某个数字（根据我的测量值为4282）时才会触发存储事件。
此外，如果同一个键下已经有一个值，IE将仅在旧值和新值的大小一起低于该限制时触发事件

一个重要注意事项是：在所有情况下，值都会写入存储器。在任何阶段都不会超过存储大小

这是一个小代码示例，用于演示该问题：

<!DOCTYPE html>
<html>
<head>  
    <script type="text/javascript">

        function handle_storage(event)
        {
            alert("event fired!");
        }

        window.addEventListener("storage", handle_storage);

        var keyName = "keyName";

        function writeToStorage()
        {
            var num = parseInt(document.getElementById("bla").value);

            var customValue = "";
            for(var i = 0; i<num; i++)
                customValue+="c";

            localStorage.setItem(keyName, customValue);
        }               
    </script>
</head>
<body >
    <button onclick="writeToStorage()">Write</button>
    <input type="text" id="bla"/>
</body>
</html>


函数句柄存储（事件）
{
警报（“事件已触发！”）；
}
window.addEventListener（“存储”，句柄_存储）；
var keyName=“keyName”；
函数writeToStorage（）
{
var num=parseInt（document.getElementById（“bla”）.value）；
var customValue=“”；

对于（var i=0；i我认为您正在达到最大存储大小限制，这导致了所描述的行为

您描述的内容听起来像是基于此测试的默认行为：




    

  • 

      好的
      
我们最后所做的是一个变通办法。丑陋，但有效
      
在每次插入存储之后，我们还插入一个“插入通知”，它只是另一个项目，具有预定义的键。通知的值是实际修改的项目的键
      
在“存储”事件的事件处理程序上，我们从事件的newValue属性中检索键，然后使用该键从存储中检索数据本身
      
需要注意的一件非常重要的事情是，如果IE11认为实际数据足够小，此流也可能会获取实际数据的事件。因此，我们必须确保不处理直接通过事件检索的任何数据，而只处理通过插入通知获取的数据
      
下面是一个简单的代码示例，展示了如何做到这一点，同时支持IE11和其他浏览器
      

      var _areInsertNotificationsEnabled; //set this to true if you are running in IE11
var _insertNotifcationsKey = "a_unique_key_for_insert_notifications";

function writeData (key, data)
{   
    localStorage.setItem(key, storageData);

    //If you are running in IE11, after adding the value itself, add an insert notification.
    //The notification's value should be the key of the actually modified value.
    if(_areInsertNotificationsEnabled)
        localStorage.setItem(_insertNotifcationsKey, key);
}

function onStorageChanged(event)
{
    //When waiting for insert notifications do not process the data itself,
    //so you won't mistakenly process the same data twice, in case the value 
    //was small enough for IE11 to fire the event
    if(!_areInsertNotificationsEnabled && event.key != _insertNotifcationsKey)
        processData(event.newValue);
    else handleInsertDataNotification(event);
}

function handleInsertDataNotification(event)
{
    //pull the actually modified key from the event
    var dataKey = event.newValue;
    //get the actually modified value
    var data = storage.getItem(dataKey);

    processData(data);        
}

function processData(data)
{
    //Do something smart
}

      

      希望这对任何人都有帮助。
      ie 11不稳定还有很多问题这是我检查的第一件事。但正如我所说，数据正在写入存储器，我甚至可以写入10倍。只是在写入时我没有得到事件。我只是遇到了这个确切的问题，在找到y之前想出了一个几乎相同的解决方案我们的帖子。我之所以去搜索，是因为它让人感觉很不舒服。我很高兴看到在事件没有发生的时候我没有发疯。@mag382，很高兴你不是唯一一个这样做的人。我们的这个解决方案已经在生产中运行了几个月了，而且效果很好。谢谢你发现了角色限制错误。另外，我不知道ced注意到Internet Explorer接收存储事件时可能存在竞争条件，但查询更新的本地存储数据会返回过时的数据。通过将“插入通知”包装在200 ms
      setTimeout
      中来延迟该通知，为我解决了此问题。