HTML5作为当代的互联网标准，在前端开发中被广泛使用。尽管很多同学对HTML5并不陌生，但是还是很少人知道其实HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。而这其中WebStorage就发挥了很大的作用。

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：

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

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

H5提供了两种客户端存储数据的方式，一种是localStorage，持久化的本地存储，浏览器关闭重新打开数据依然存在，另一种是sessionStorage，针对一个session的本地存储，在没有出现webStorage之前这些都是由cookie来完成的，cookie的特点是存储量小，在服务器和客户端之间来回传递，所以传输效率不高。webStorage API 继承于Window对象，并提供了两个新的属性Window.localStorage 和 Window.sessionStorage，相较与cookie存储，webStorage存储容量增加，可以将请求的表单数据存于本地，减少http请求，节约带宽，同时webStorage拥有易用的API。

为了让同学们能够快速掌握 Webstorage，我们推出了全新的课程——HTML5 WebStorage详解。本课程就H5 web 存储之 Webstorage进行详细的解读，并附有多个案例，让学习者能快速地掌握这一技术。下面我们一起来欣赏这门崭新的课程的目录。

第一章 web storage基础

 1-1 webstorage分类   (03:19)

 1-2 localStorage常用方法-01   (05:19)

 1-3 localStorage常用方法-02   (04:57)

 1-4 localStorage常用方法-03   (06:28)

 1-5 localStorage常用方法-04   (04:18)

 1-6 localStorage常用方法-05   (04:05)

第二章 web storage案例

 2-1 localStorage综合案例-01   (05:00)

 2-2 localStorage综合案例-02   (05:15)

 2-3 localStorage综合案例-03   (05:58)

 2-4 web留言-01   (05:23)

 2-5 web留言本-02   (06:16)

 2-6 web留言本-03   (05:14)

 2-7 web留言本-04   (06:57)

 2-8 学生信息管理   (06:42)

 2-9 学生信息管理-02   (08:35)

 2-10 学生信息管理-03   (05:41)

第三章 前端离线缓存

 3-1 离线缓存概述   (01:30)

 3-2 离线缓存操作步骤-01   (08:14)

 3-3 离线缓存操作步骤-02   (07:28)

 3-4 离线缓存操作步骤-03   (04:11)

我们的这门课程一如既往的重视基础，第一章就是 web storage的基础内容，帮助我们更好的理解web storage的知识体系，建立起我们自己对web storage的认知。然后就是我们的动手实践能力，通过精心筛选的web storage案例帮助我们快速适应当前的各种涉及web storage的项目的开发，最后则是为我们介绍了前端的离线缓存，这一点当前的很多大型网站都是必须要支持的一个基础功能，比如我们的动力节点在线官方网站就是这样。

在学习这门课程的过程中我们需要有独立思考的能力，通过WebStorage和cookie的比较，弄清楚Web Storage的存在意义。好了，我们的谈论也只是对WebStorage课程的管中窥豹，可见一斑，只有自己亲身去学习才能体会这门课程的优秀之处。