浅谈webStorage、audio、video

浅谈webStorage、audio、video

一、WebStorage

如果把用户信息存入vuex，刷新后由于vue会重新加载，所以vuex中的数据也将不复存在。如果希望用户状态持久化保存，可以选择HTML5提供的webstorage。

webstorage提供了用于存储数据的两块数据区域：

localStorage : localStorage中存储的数据将会永久保存在客户端本地。

sessionStorage ：sessionStorage中存储的数据只会在当前会话（不关闭浏览器即为一个会话）中有效。

WebStorage的基本使用

1. 获取sessionStorage与localStorage对象：

   let sObjs= window.sessionStorage;
   let lsObj = window.localStorage;
   

2. 如何向storage中存储数据：

   // 可以存储key：value    
   ss.setItem('islogin', 'true')
   ls.setItem('username', 'admin')
   

3. 如何从storage中取出数据：

   sObj.getItem('islogin') => 'true'
   lsObj.getItem('username') => 'admin'
   

4. 如何从storage中清空数据：

   sObj.clear()
   lsObj.clear()
   

5. 如何从storage中删除数据：

   sObj.removeItem('islogin')
   lsObj.removeItem('username')
   

二、音频与视频

1、音频与视频标签

1）音频标签

音频标签可以支持在网页中播放音乐，支持的音频格式有：mp3, wav, ogg。

简写方式：

<audio src="音频文件路径" controls></audio>
<audio src="../asset/a.mp3" 
       controls     // 控制是否显示控制面板
       autoplay     // 控制是否在标签加载完毕后自动播放
       muted        // 控制是否静音
       loop         // 控制是否单曲循环
       preload      // 控制音频的预加载模式
       ></audio>

preload可选值：

none: 不进行任何音频的预加载

auto: 尽可能的加载音频资源

metadata: 只加载元数据（音频时长、格式、视频宽度、高度等…）

标准方式：

<audio controls ....>
    <source src="letitgo.mp3" type="audio/mpeg"/>
    <source src="letitgo.wav" type="audio/wav"/>
    <source src="letitgo.ogg" type="audio/ogg"/>
    该浏览器不支持播放,请尝试换一个浏览器打开，推荐使用Firefox、Chrome浏览器...
</audio>

2）视频标签

用于在网页中播放视频：

<video src="视频路径" controls></video>

<video controls>
	<source src="letitgo.mp4"/>
    <source src="letitgo.webm"/>
    <source src="letitgo.ogg"/>
</video>