浅谈Web数据存储

先看一张图片 

这张图片对每一位前端开发来说都不陌生，话说Chrome的控制台真心好用啊！cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增内容看的一清二楚，免去了很多调试代码工作。不过这里还不全面还有ie下的userData及flash的SharedObject。

cookie

cookie是我们用得最多的一种本地存储方式： 
特点：

• 单域名容量不能超过4k
• 主域和子域共享cookie且httpt请求头部会带上cookie中的数据
• 安全性不太好

userDate

userDate是ie特有一种web存储方式
特点：

• 容量大每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。
• 数据以XML格式保存在客户端
• 不兼容，只有IE下才有

sessionStorage& localStorage

sessionStorage和localStorage作为HTML5的Web Storage的两种存储方式操作API相同。sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被销毁，localStorage 方法存储的数据没有时间限制。
特点：

• 数据存储量大每个域名有4M
• 主域和子域不共享数据
• 主流浏览器都支持

工作中我们可以把userDate和localStorage结合起来实现跨终端跨域web存储。可以看鬼道的
跨终端跨域的存储方案

application Cahe(离线存储 )

离线存储就是将一些资源文件保存在本地，这样后续的页面重新加载将使用本地资源文件，在离线情况下可以继续访问web应用，同时通过一定的手法（更新相关文件或者使用相关API），可以更新、删除离线存储等操作。
特点：

• 资源被缓存，加载更快
• 降低server负载
• 含有manifest属性的当前请求页都会被缓存
• 更新是全局的，无法单独更新某个文件

indexedDB

一种能在浏览器中持久的存储结构化数据的数据库，并且为web应用提供了丰富的查询能力。
特点：

• 提交关系性数据存储
• 兼容器差

借用网上的一张图看一下indexedDB存储形式

webSQL

webSQL规范已被W3C废弃了，所以我们这里不多说，只要知道也是一种web存储方式就可以了。

这些是根据我自己的理解整理出来的一篇文章，如果有说得不对的地方请指正。