关于视频断点续播和H5的本地存储

时间：2021-08-27 03:08:44

　　前段时间，需要在下实现一个视频的断点续播功能，呃，我不会呀，这就很尴尬了。然后呢，在下就想起了一个叫做localStorage的东西。这是个什么东西呢？在网上查阅了一些资料后，在下发现这是webStorage提供的两种类型的API中的一种，而webStorage是HTML中提供的本地存储解决方案。

　　我个人理解，这东西就是可以向客户端本地存储数据的一个技术，那这哥们的特点是什么呢？它的生命周期是永久的，不像sessionStorage，关闭页面或者浏览器后就会被清除，所以在下选择localStorage来实现断点续播。

　　实现断点续播的方法就是在视频播放的同时，更新存储在客户端本地的视频时间，每次打开视频的时候，先获取存储在客户端本地的视频时间，若取到的是null，那么直接video.play()，正常播放即可，否则断点续播就行了。实现断点续播的具体代码就不贴出来了，这里只提供一个实现思路。

以下是localStorage的一些方法：　

　　localStorage.setItem("key","value");//以键值对的形式存储数据

    localStorage.getItem("key");//通过键名来获取相应的值

    localStorage.removeItem("key"); //通过键名来删除相应的键值对
　　localStorage.clear();​//清空localStorage中所有信息
 

相关文章