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

今天同事报了一个线上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