1

我正在使用 html5 的 localStorage API。

该场景是用户单击“添加到我的列表”按钮，以便她可以将位置名称保存到列表中。

以下代码仅在 Chrome 中完美运行。适用于一个窗口，也适用于从同一来源打开两个或多个窗口的情况。如果在 Firefox 和 IE 中只打开一个窗口，则可以正常工作。如果有多个窗口，则在 IE 中不会获取数据。在 Firefox 中，如果我单击添加名称，会添加大约 30 次。

我尝试根据我找到的示例来实现我的代码。

我该如何解决？

提前致谢。

<input type="button"  value="Add to my list" onClick="savepoi(document.getElementById('name').innerHTML);"/>                                     

<script>

//listen if a storage happened to another window and call the right function
if (window.attachEvent) { // IE8 support
   window.attachEvent('onstorage', storageEvent);} 
else 
{window.addEventListener('storage', storageEvent, true);}

function storageEvent(event) {
//if something is added
   if(event.oldValue==null)
   {savepoib(event.newValue);}
}


function savepoi(a){
  //if no localStorage, set firs key=1, else add 1 to the existing
  //save key and name together
  if(localStorage.length==0)
  {localStorage.setItem(1,1+"-"+a);}
  else
  {localStorage.setItem((localStorage.length+1),(localStorage.length+1)+"-"+a);}

}

function savepoib(a){
  //split to get key and name 
  var b =a.split("-");
  var idi=b[0];//key
  var myname = b[1];//name

  if(localStorage.length==0)
  {localStorage.setItem(1,1+"-"+myname);}
  else
  {localStorage.setItem(idi,idi+"-"+myname);}
}
</script>
4

1 回答 1

0

存储事件是一团糟。我已经用它做了一些工作，但事情并不一致。Chrome 仅在其他窗口中触发事件，Firefox 在所有窗口中触发，包括发生更改的窗口和 IE，我不记得问题出在哪里。无论如何，这是我用来消除差异的代码（它是我的 store2.js 库的插件）：

https://github.com/nbubna/store/blob/master/src/store.bind.js

希望有帮助。

仅供参考，为了一致的行为，我考虑过尝试使用 postMessage 或类似的东西来伪造存储事件，但我从来没有时间去追寻这个想法，看看它是否真的可行。

于 2013-10-22T14:52:58.467 回答