在很多面试的时候或者博客上都会经常遇见讨论localStorage、sessionStorage、cookie三者的区别,我想说的是讨论它们没有什么错,可是我很好奇,前端发展了这么久,我们就只知道这三种缓存方式吗?还是说面试官不是做前端的?indexedDB呢?好吧,可能是因为indeedDB可能是对标数据库的原因,但是仔细想想是不是还是忽略了一种缓存方式,那就是链接传参!
好好想想,可以说,localStorage、sessionStorage、cookies和链接传参是真正对等的缓存方式。为什么这么说呢?
来看看它们的区别:
在这之前,可以肯定的是它们的存储容量肯定是不一样的,这里就不细细讨论容量的问题,因为即便是最小容量的那个,也不一定能用得完。在这仅讨论它们的缓存表现。
首先是localStorage数据,它就像是狗皮膏药一样,你用到了它,只要你没想起来去清除它,他就会永远在你的localStorage中。像这种,用来存各种token就很好啊,我们也不用关心各种token的有效期了,过期了的话,后台自然就会判断,然后重新请求了数据再更新localStorage相应的数据就行了。
但是总有一些数据缓存的时候是要你去关心页面关闭后是否需要清理掉的,我们得到的数据最终都是来自数据库,有些缓存的数据之所需要缓存,是因为数据库的数据暂时还不会更新,但是关了web应用之后就不好说了,对于这种不确定的就一定要清缓存,当然也可以用localStorage存,关闭的时候就要clear操作,但是总有一些不确定因素,不会进行你设置好的操作,就如用户直接关闭的是浏览器,你就懵逼了。这是就需要sessionStorage,无论是关闭应用还是关闭浏览器,都不用进行clear操作。
说句题外话,说到清除缓存的操作,我觉得这是特别耐人寻味的地方,很体现功力的操作。一句话概括,之所以要清除,是为了下一次的操作更精准。
Cookie呢,是跟localStorage最像的,唯一的区别就是cookie有时效性,就是说可以设置缓存时间,当然这是从前端的角度来说的。cookie还会有一个很重要的特点,就是后台也可以操作cookie,这也是它区别于其它方式的重要特点。
最后要说说这链接传参,它缓存的位置当然就是在地址栏上面。这没什么,因为每一种缓存方式的存储位置都是不一样的,像localStorage、sessionStorage、cookie这些不都是有各自不同的存储位置吗?所以存储位置在地址栏这并不奇怪。在我看来,链接传参属于一次性消费,你传一次,跳到指定页面就能使用一次,它还给我们带来赠品,就是你跳到了a页面,再跳到了b页面,然后再从b页面返回到之前的a页面,你还可以享受一次链接带参的快感,返回是不用你在b页面写链接的,这当然是浏览器的特性,而我把它归为链接传参的特性也是没有错的。看看吧,这多像一个函数,调一次使用一次。可以说链接传参是彻底的贯彻了之前说的一句话,之所以要清除,是为了下一次更精准的操作。与其说每一次传递参数繁琐,我更愿意把它比喻为缓存方面的强类型。本质更像是发布订阅模式。而且它还是只读的,也就是跳一次链接才拼接一次,拼接的时候修改。这种操作,看似麻烦,但是确保了稳定性。
说回localStorage和sessionStorage,这就不禁让人想起它们在微信和支付宝里面的表现,或者换句话说,微信和支付宝内的浏览器内核的表现。我不知道我的描述准不准确,因为我遇到的问题可能跟浏览器本身无关,有关的可能是微信和支付宝的处理方式。当微信内跳微信支付,支付完回来,sessionStorage还在,这说明微信跳支付的时候并没有关闭浏览器,支付完也并不是重新打开浏览器,就跟从一个应用跳到另一个应用去支付,支付完再跳回去,这更像是一个系统的操作,并不会去主动关闭用户没有关闭的应用。h5在支付宝跳支付的时候,支付完回来后sessionStorage的东西就没有了,sessionStorage的特性就是浏览器关闭就会清除,当然我也不知道支付宝是不是跳支付的时候先把浏览器关闭,支付完再把浏览器打开到原来的页面,真像是回到了塞班时代。
说到这里,还可以聊些题外话。因为我突然想起了http和https的那些事,浏览器在localStorage和sessionStorage的存储方面就好像不会为你区分你这个链接到底是http还是https一样,www.xx.com和https://www.xx.com看似一样的链接,浏览器在记录storage的时候可不会这么认为,它只会通过唯一的key来记录storage的存储位置,显然它认为http://www.xx.com和https://www.xx.com是不太一样的key,这显然和http://www.xx.com和https://www.xx.com都可以跳到相同的网站去的行为冲突了,相同的网站,确实不相同的storage。
其实很多情况下,四种缓存方式都是适用的,只有到了你的某个需求已经足够复杂,才能享受到它们在细节上面给你带来的好处。