1 本地存储

☞发展

      随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。

 ☞  localStorage

1. 永久生效

2. 多窗口共享

3. 容量大约为20M

  ◆window.localStorage.setItem(key,value)  设置存储内容

  ◆window.localStorage.getItem(key)               获取内容

  ◆window.localStorage.removeItem(key)  删除内容

  ◆window.localStorage.clear()                  清空内容

    

添加效果

能看到设置的key和值被添加进去了，当关闭浏览器时，仍然存在

获取效果

通过key获取内容，并将内容打印在控制台上

☞ sessionStorage

1. 生命周期为关闭当前浏览器窗口

 2. 可以在同一个窗口下访问

 3. 数据大小为5M左右

          

◆window.sessionStorage.setItem(key,value)

◆window.sessionStorage.getItem(key)

◆window.sessionStorage.removeItem(key)

◆window.sessionStorage.clear()

（用法类似）

2 操作多媒体

参考手册：http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp 

 案例：完成一个在线视频播放器

效果图

鼠标扫过视频，出现菜单栏，可以实现点击切换视频