在H5到来之前，数据存储的方式大多使用cookie，但由于其体积太小以及请求时地址栏显示数据等缺点，便有了H5中的localStorage，可以存储较大数据，且不会自动发送到后台。这里主要介绍总结集中web前端数据存储的几种方法及区别。
1.cookie
存储数据较小，大小4K之内；
请求时地址栏带数据，存储在客户端（电脑浏览器中）；
不易存储内容过多，会严重占用服务器端带宽，影响性能；
对于IE浏览器有UserData，大小是64k,只有IE浏览器支持。
2.本地存储localStorage
以键值对的方式存储，永久存储，除非手动删除；
大小：5M，拓展了cookie的4K限制，相比于cookie可节约带宽，但只在高版本浏览器中支持；（注：IE9 localStorage不支持本地文件，需要将项目部署到服务器，才可支持）。
3.本地存储sessionstorage
与localStorage 在使用方法上相同，区别在于 sessionStorage 在浏览器关闭后即被清空，而 localStorage 则会一直保存。
4.Web SQL
关系数据库，通过SQL语句访问；
Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。
5.IndexedDB
索引数据库 (IndexedDB) API 对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。
6.离线缓存（application cache）
优点： 离线浏览；
提升页面载入速度；
降低服务器压力；
离线缓存与传统浏览器缓存区别：
1. 离线缓存是针对整个应用，浏览器缓存是单个文件
2. 离线缓存断网了还是可以打开页面，浏览器缓存不行
3. 离线缓存可以主动通知浏览器更新资源
（不完全总结，欢迎各界大佬补充，随时完善）