关于SCRIPT5022: QuotaExceededError错误，从发现到解决

来源：互联网发布：js 变量字符串拼接编辑：程序博客网时间：2024/04/28 10:06

今天同事报了一个线上bug， ie10下页面不能正常使用。但除了改同事电脑外，其他人竟无法复现。为了不影响其工作，通常不会直接用其电脑提示。所以第一步，我采取了之前常用的方案来追查错误。

1，首先让同事把该网页源码发给我，然后利用cookie抽样工具确定同事的cookie抽样。

2，我将源码保存成文件bug.file，用fiddler把自己的线上页面的http页面改为autoresponse，文件为bug.file。然后将自己的IE10浏览器的cookie设置为与上述工具取样相同。

通过以上两种方式力求达到与bug发生现场的环境和代码一直，由此可以在本机定位无法复现的问题。曾经这个方法屡试不爽，但这次居然依然无法复线。

既然代码相同，cookie一致，为什么还不能复现呢，初步推断为与本地存储有关，这样会造成代码相同而数据不同的情况。于是就只能硬着头皮到同事的电脑上去调试了。打开调试工具一看，报了一个“SCRIPT5022: QuotaExceededError”错误，以前还真没见过，不过从字面意义能看出应该是存储报表了。回想到页面有用到localStorage的相关功能，所以推断为本地存储的爆表导致的。

1，于是，在控制台中输入

 window.localStorage

果然报上述错误（这一点很奇怪，只有在该同事的浏览器会这样，连访问都会报错，而且代码中的操作是包含在try{}catch(e){}中的，居然不能捕获到该错误）

2，既然知道产生错误的原因，就开始想修复方案了，其实简单，也无非是清除策略。

try{localStorage.setItem(key,value);}catch(e){if(e.name == 'QuotaExceededError'){localStorage.clear();localStorage.setItem(key,value);}}

上面的方案在多个浏览器和多个同事电脑下尝试是没问题的，只有事发电脑不可以……

现象依然是不能访问localStorage对象。如果哪位知道是因为什么问题导致的IE10下的这个奇怪的问题，希望给解释一下。

不管怎么样，我们都是要必须在服务端代码上加上上述修复代码的。至于该同事电脑，只能在客户端清除了。

最后复现上述错误可以用下面的代码。但注意，每个浏览器表现不一致。

localStorage.clear();var kb = new Array(1024);kb = kb.join('a');var mb = new Array(1024);mb = mb.join(kb);var MAX = 100;for( var i = 0; i < MAX; i++ ){  try{    localStorage.setItem( 'i-' + i, mb);    }catch(e){    alert(e.message);    break;  }  }

参考资料：

关于localStorage： http://www.w3.org/html/ig/zh/wiki/HTML5/webstorage

关于计算localStorage剩余空间：http://stackoverflow.com/questions/3027142/calculating-usage-of-localstorage-space

同事贡献的复现该错误代码：http://jsbin.com/paxetuvo/1/edit

0 0