Web Storage实用指南-演道网

Web Storage

如有不当之处,欢迎指出,如需转载,请注明出处

本文一共分为两章。

第一章讲Web Storage的使用,目标是让大家看完第一章后基本能应对80%的使用场景。

第二章会讲一些Web Storage的进阶知识,包括一些标准,没有太多看的必要,但是也会有点小用。

还有,这是一篇推Web Storage的文章,所以也不给大家挂Cookie相关的链接或者教程,也不去多讲Cookie了,就是这么任性,哼╭(╯^╰)╮!

Web Storage使用

当一个新的技术出现时(已经不新了=。=),我们都会想知道:这个技术的出现是为了解决什么问题的?所以,Web Storage的出现又是为了解决什么问题咧?

顾名思义,Web Storage的出现就是为了解决客户端数据存储问题的。那有人就问了,存储不是有Cookie, userData, Flash等等解决方案吗?需要这个Web Storage吗?

其实Web Storage的出现是为了克服Cookie的一些限制,如果你的数据不需要服务端处理,只需要存储在客户端,根本就不需要持续的将数据发回服务器(Cookie会跟在每次HTTP请求里)。Web Storage的两个主要目标是:

  • 提供一种在Cookie之外存储会话数据的途径

  • 提供一种存储大量可以跨会话存在的数据的机制

所以,虽然现在的技术方案确实能解决很多存储问题,但是,既然出现了这么个新的东西,肯定也是有它存在的意义的,我们不妨深入的了解和尝试一下,说不定就会发现还是挺好用的。

目前的情况是Cookie和localStorage用的比较多,我们也可以尝试用sessionStorage做一些Cookie现在做的事情。

兼容性

既然要使用它,那我们首先要知道各大浏览器对它的支持情况,如果满足业务需要,那我们就可以放心大胆的用了。

桌面浏览器

浏览器 IE Firefox Chrome Safari Opera
版本 8 3.5 4 4 10.5

从上面的图可以看出来,桌面浏览器只有IE7及以下不支持Web Storage。

移动浏览器

浏览器 Andriod UC Safari Opera Mini
版本 2.1 11 3.2 不支持

移动端浏览器除了Opera Mini不支持外,其他都是支持的

数据来源: caniuse.com

综合以上的信息,Web Storage的兼容性其实是很好的,基本可以放心大胆的用它了。(如果你的项目需要兼容IE7及以下,可以考虑用userData代替,本文不展开介绍Web Storage以外的知识)。

分类

我们已经确定了Web Storage可用了,现在可以具体的讲讲它的使用。Web Storage有两种实现,一个是localStorage,一个是sessionStorage。在讲它们之前我们先解释一个概念:文档源

文档源

文档源是通过协议主机名端口来确定的。如图:

只要有任何一项不同,它们就是非同源文档,下面的每个URL都有不同的文档源:

http://www.example.com        // 协议:http; 主机名:www.example.com
https://www.example.com       // 不同协议
http://static.example.com     // 不同主机名
http://www.example.com:8000   // 不同端口

参考链接:MDN-浏览器的同源策略

localStorage

localStorage是用来做永久性存储的。

时效

localStorage里的数据的时效是永久的!只要你不删,它就一直在那。除非web应用需要删除或者用户需要删掉它。

作用域

localStorage的作用域是限定在文档源级别的,
不同的文档源之间是不能读取和修改对方的数据的,而相同的文档源是可以的。但是不同的浏览器是不共享Storage的,也就是说你在Chorme浏览器里存的数据,在Firefox里是访问不到的,即使它们是同一文档源。

sessionStorage

sessionStorage是用来做临时性存储的。

时效

sessionStorage的时效只存在于标签页存在的时间,一旦标签被关闭了,sessionStorage存储的数据也会被删除掉。

作用域

sessionStorage的作用域同样是限定在文档源级别的,不仅如此,它还被限制在标签页中,不同标签页的同一个页面拥有各自的sessionStorage,数据不能共享。如果是一个页面里有两个