摘要：随着HTML5的出现，Web前端发生了翻天覆地的变化，作为下一代HTML（超文本标记语言），HTML5在原先的基础上做了很大部分的改进，也新增了很多的机制，特别是HTML5储存技术的出现，极大的方便了Web开发，提供了新的储存方式，告别了过去单一的Cookies的储存方式。本片论文主要介绍的就是HTML的前端存储技术的介绍和实践，因为它很大程度上解决了本地存储空间狭小，浏览器兼容性差，离线不可读取数据，运行缓慢等问题。

一个完整的网页是三位一体：HTML（结构）+CSS（表现）+JavaScript（行为），本篇论文首先简单介绍了HTML5+CSS3+JavaScript的基本技术，然后从H5的本地存储（localStorage&sessionStorage),应用程序缓存，indexDB三方面介绍了H5的存储特点，使用及比较等。其中H5的本地存储是储存在本地磁盘中的名称/值对，它的作用是在网站中把有用的信息存储到本地，然后根据需求从本地读取信息；H5的离线Web应用，主要是通过应用程序缓存整个离线网，HTML.CSS.JavaScript，网站图像和资源；而index DB则用键值对来保存的，做到了浏览器也能缓存数据库。最后在了解它们各自的特点，使用后研究了H5的存储对应的实践应用。

关键词：超文本高清语言  本地存储 离线缓存 数据库存储

目录

摘要

ABSTRACT

1 引言-1

1.1 研究背景-1

1.2 研究方向-1

2 CSS3,H5,JS简介-2

2.1 CSS3技术-2

2.2 H5技术-3

2.3 JavaScript技术-3

3 H5本地存储研究与实践-5

3.1 localStorage-5

3.2 sessionStorage-6

3.3 本地存储实践与使用-6

3.4 Cookies-8

3.5 本地存储与Cookies的比较-10

4 应用程序缓存与开发-11

4.1介绍-11

4.2 离线的意义-11

4.3 使用-11

5 IndexedDB技术与实践-14

5.1介绍-14

5.2前景-15

5.3使用-15

6总结-19

参考文献-20

致谢-21