localStorage在不同浏览器中的差异研究

 

localStorage是浏览器用于存储本地数据的一个对象.浏览器支持还是不错的,至少ie8系已经开始支持.其他现代浏览器的支持更不在话下.
关于localStorage的使用这里不赘述,网上有很多文档,使用起来也很方便.
这里只阐述localStorage在不同浏览器中使用的一些小小差异,特别是firefox浏览器:
这里有一个简单的图表,图表信息的意思下面会做一个详解:

1.关于用数字做索引

在大多数浏览器里(事实上只有firefox不支持)localStorage是可以用纯数字或者数字的字符串写法做索引的.
例如下面的代码:

在除了firefox之外的浏览器中都会输出”test5″,但是在firefox里会报错:

事实上在设置值的时候firefox中可以使用数字索引的方式来设置,只是在获取的时候就不可以了,所以代码写成这样的时候就正常了:

最后输出”test5″

2.对不存在的索引的处理.

如果你在浏览器里调用一个不存在的索引的localStorage会发生什么呢?

事实上每个浏览器的处理方式并不相同,结果在开始的图表里已经有了:firefox返回null,其他浏览器返回undefined.
还有一种情况,如果用getItem去获取的话,情况又变得不一样了:

使用getItem的时候,chrome和firefox都会返回null,其他浏览器返回undefined.
注意这里两种获取方式返回结果的不同.

3.firefox中对file://协议的不支持.

当你在firefox中打开一个本地的html文件的时候,也就是使用file://协议运行一个页面的时候,localStorage是不起作用的.无法设置和获取localStorage.
其实,本地调试这种方式已经很落后了,至少应该再127.0.0.1的环境中调试吧,这样调试的时候localStorage是工作的,有的人说这是一个firefox的bug.
但是看到一个解释,我觉得还是挺靠谱的,在file协议中,本来就没有domain的概念,而localStorage是根据domain来生效的.所以从道理上来讲就不应该在file://协议上生效.
参见:https://bugzilla.mozilla.org/show_bug.cgi?id=507361

其他本地存储的tip:

1.sessionStorage是一个跟浏览器生命周期相同的本地存储,在页面刷新后保持之前输入的数据的场景下特别有效.
2.可以用localStorage.clear()方法彻底清除localStorage.
3.localStorage对于每个域都有5兆的存储空间,而且对于存储数据条数也有不同的限制.
4.localStorage只能存储文本数据.如果你想存储图像,那也不是不可能的,可以用canvas将图片转换成dataurl的形式,然后存储起来.
5.请关注localStorage的存储性能,在某些浏览器中存取数据非常慢,例如opera中.

欢迎前端开发者加入群:46532005

没人关注...伤心

必须关注噻～