对于快速Web APP，缓存四赢得性能的关键。最近个把月，我做了个所谓“清除浏览器实验”，研究下用户清除缓存的时候会发生哪些奇葩的事情。另外，除了浏览器的磁盘缓存（指图片啊等数据），我还折腾了其他一些数据格式，如：cookies， localStorage， 以及 application cache. indexedDB并不在其中，因为貌似其要嗝屁了。

实验的准备与操作（大致看看）

该测试从Save Stuff这个页面开始。该页面做了4件事情：

1.设置了一个叫做”cachetest”的永久Cookie， JavaScript创建；

2.测试window.localStorage以确定是否支持本地存储。如果支持，将会看到一个关键字为”cachetest”的本地存储值；

3.测试window.applicationCache以确定是否支持应用程序缓存 – appcache（Application Cache – 可用来实现离线应用）。如果支持，会使用appcache加载一个iframe. 该iframe的manifest文件有个包含“iframe404.js iframe.js”的备份片段。因为iframe404.js是不存在的，appcache会加载iframe.js（定义了全局变量iframejsNow）代替之。

4.加载一个需要5秒返回的图片，并缓存30天。

OK，现在数据已经保存到浏览器中了，然后用户根据系统提示清除浏览器数据，然后去检查缓存页面去查看之前保存的数据项还在不在。

1.查找名叫”cachetest”的Cookie;

2.检查关键字为”cachetest”本地存储数据；

3.再次加载iframe， 通过iframe的onload事件处理，检查iframejsNow是否被定义，以确定appcache是否被清掉了；

4.加载同样那个要超过5秒的图片，如果这回图片加载的时间多于5秒，说明图片的缓存被干掉了。

我的测试结果

浏览器数据缓存清除的结果 张鑫旭-鑫空间-鑫生活

上图所示结果虽然不尽相同，但是跟我预想的很接近，然后其他一些知识碎片：

1.Chrome 21不清除localStorage. 这个异常结果可能归结于测试结果。 Chrome 21清除localStorage，但是并不在当前选项卡的内存中清除。如果你切换选项卡或者是重启Chrome浏览器，则被清掉了，是从内存中也清掉了。这实际上是一个bug， Chrome 23.0.1259以及后续版本修正了这个问题。

2.Firefox 3.6不清楚磁盘缓存，该问题的出现似乎与Chrome 21约好的：图片已经从磁盘缓存中清掉，但是，内存缓存中还在。按理说，两者都应该被清除掉的，2010的时候，FireFox团队修复了这个bug。

3.IE 6-7不支持appcache以及localStorage。

4.IE 8-9不支持appcache。

5.Firefox 3.6， IE 8-9， and Safari 5.0.5不清除localStorage， 我猜想，出现这个问题的原因是浏览器没有连接这些本地存储的界面。可参考下面展示的浏览器界面。

浏览器的交互界面们

在查看广泛数据下的结果前，有必要先看看各个浏览器清除数据的界面是怎样的，包含哪些清除的选项。下面截图来自Mac或window， 因此，可能和你自己看到的是有一些差异的。

Chrome

点击扳手图标 → 历史 → 清除所有浏览数据…Chrome 21浏览器下如下显示。复选”Empty the cache”（“清空缓存”）清除磁盘缓存，”Delete cookies and other site and plug-in data”（“删cookie以及其他站点和插件数据”）清除cookies， localStorage， 及appcache.

Chrome21浏览器下清除数据的操作界面 张鑫旭-鑫空间-鑫生活

Firefox

清除Firefox 3.6点击工具 → 清除最近历史…然后复选Cookie和Cache. 没有清除localStorage的复选框。

FireFox3.6浏览器下的数据清除  张鑫旭-鑫空间-鑫生活

FireFox12通过新增离线站点数据（Offline Website Data）这个复选项修复了这个问题。Firefox 15 有同样选择。结果localStorage被成功清掉了！

FireFox12浏览器下的数据清除（含离线站点数据）

Internet Explorer

IE6下可能要折腾点。点击工具 → internet选项… → 两个按钮：删除Cookie…（Delete Cookies…）和删除文件…（Delete Files…）。 两个按钮都需要确认是否选择并删除。这里有个“删除所有离线内容”（“Delete all offline content”）选项，但因为appcache和localStorage不支持，对于本实验而言纯属打酱油的。

IE6浏览器下浏览数据的清除 张鑫旭-鑫空间-鑫生活

清除IE7则点击工具 → 删除浏览历史…仍然是两个分离的按钮，删除文件（deleting files）和删除cookie（deleting cookies）， 同样有个“删除所有…”按钮，可以一键搞定everything~~