用户在浏览网页的时候，可能需要存储一些数据在本地，之前是采用 Cookie 的方式存储，但是 Cookie 只能存储大小为 4k 以内的数据，再多的数据就存储不了。并且 Cookie 的解析也是很复杂的。
到了h5阶段，又提供了两种方式来存储 web 数据：sessionStorage 和 localStorage。
1、sessionStoragesessionStorage的使用：将存储数据到本地。存储的容量 5MB 左右。
注意：sessionStorage 的存储特点：
这个数据本质是存储在当前页面的内存中，意味着其它页面和浏览器无法获取数据。
它的生命周期为关闭当前页面时，数据会自动清除。
提供的方法：
setItem(key,value) ：存储数据，以键值对的方式存储，
getItem(key) ：获取数据，通过指定名称的key获取对应的value值，
removeItem(key) ：删除数据，通过指定名称key删除对应的值，
clear() ：清空所有存储的内容。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <pre> sessionStorage的使用 </pre><br> <input type="text"><br> <input type="button" value="设置数据"> <input type="button" value="获取数据"> <input type="button" value="删除数据"> <script> /*存储数据*/ document.querySelector("#setData").onclick=function(){ /*获取用户名*/ var name=document.querySelector("#userName").value; /*存储数据*/ window.sessionStorage.setItem("userName",name); }; /*获取数据*/ document.querySelector("#getData").onclick=function(){ /*如果找不到对应名称的key,那么就会获取null*/ var name=window.sessionStorage.getItem("userName"); alert(name); }; /*删除数据*/ document.querySelector("#removeData").onclick=function(){ /*在删除的时候如果key值错误，不会报错，但是也不会删除数据*/ window.sessionStorage.removeItem("userName"); }; </script> </body> </html>1、获取数据的时候，如果找不到对应名称的 key，那么获取的值为 null。
2、删除数据的时候，如果 key 值错误，不会报错，但是也不会删除数据。
2、localStoragelocalStorage的使用：
存储的内容大概 20MB 大小
不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据；
永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除。如果想清除，必须手动清除
setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <pre>localStorage的使用：</pre> <br> <input type="text"><br> <input type="button" value="设置数据"> <input type="button" value="获取数据"> <input type="button" value="删除数据"> <script> document.querySelector("#setData").onclick=function(){ var name=document.querySelector("#userName").value; /*使用localStorage存储数据*/ window.localStorage.setItem("userName",name); }; /*获取数据*/ document.querySelector("#getData").onclick=function(){ var name=window.localStorage.getItem("userName"); alert(name); }; /*清除数据*/ document.querySelector("#removeData").onclick=function(){ window.localStorage.removeItem("userName"); }; </script> </body> </html> 三、自定义播放器我们知道不同的浏览器的音频视频的播放器控件显示样式有差异，那么我们怎么做一个在任何浏览器下都有相同样式的播放器呢？
常用方法：
load() 加载，
play()播放，
pause() 暂停。
注意：jQuery中没有提供对视频播放控件的方式，所以如果使用jQuery操作元素，必须将其转为原生 js 的方式来调用这些方法。
常用属性：
currentTime：视频播放的当前进度
duration：视频的总时长
paused：视频播放的状态
常用事件：
oncanplay：事件在用户可以开始播放视频/音频时出触发
ontimeupdate：通过该事件报告当前的播放进度
onended：播放完时触发