今天在项目中遇到这样一个问题,先大概说下操作流程:微信浏览器中第一个页面填写信息,将信息保存在sessionStorage中,然后第二个页面上传图片,第三个页面回显第一个页面填写的信息并提交。问题是在大部分手机中,这个流程是没有问题的,成功提交;但是在小米手机中,当在第三个页面获取sessionStorage中的信息时,获取到的是null。
查阅了一些资料,有人说移动端浏览器在页面跳转的时候,可能会将前面的页面关闭,重新打开一个新的页面。这种情况的话,就把sessionStorage换成localStorage,不管是不是打开新的页面,肯定是都存在的。当然如果手机浏览器设置无痕浏览的话,结果怎么样还没亲自尝试。
另外这个项目中有个问题,就是往sessionStorage中存值(setItem)的时候,每个字段都存了一个值,这样的话就存在一个问题写入和读取缓存的次数都增加了,性能必然降低。抱着尝试的态度,将字段整合在一个对象中,然后将对象写入sessionStorage,这样就写入一个值,读取一个值,也算是优化性能了吧。然后在报错的小米手机中测试了一把,sessionStorage失效的问题没有了,问题解决了。
不知道这是个什么原理,记得之前看过一篇博客,就是对sessionStorage和localStorage的性能进行测试的结果,找不到地址了,大概说下人家的测试结果吧,就是sessionStorage和localStorage的存取性能受存取数量的影响比较大,但是受一个值的大小(比如一个对象的大小)影响基本没有。
有人知道原理的话,请告诉一下,在这先谢过了!
总结:存取sessionStorage或者localStorage时,尽量减少存取的字段数量,将要存取的字段整合为一个对象存取不仅优化性能,还有可能避开一些不明原理的bug