【html5】08-本地存储和操作多媒体

Mikuc2024-05-20 8:01

1 本地存储

☞发展

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

☞ localStorage

永久生效

多窗口共享

容量大约为20M

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

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

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

◆window.localStorage.clear() 清空内容
复制代码
<body>
	
	<input type="button" name="" class="bt1" value="添加">
	<input type="button" name="" class="bt2" value="删除">
	<input type="button" name="" class="bt3" value="获取">
	<input type="button" name="" class="bt4" value="清空">
	<input type="button" name="" class="bt5" value="索引获取">

	<script type="text/javascript">
		
		var bt1=document.querySelector(".bt1");

			bt1.onclick=function() {
				window.localStorage.setItem("name","zs");
			}

		var bt2=document.querySelector(".bt2");
			bt2.onclick=function() {
				window.localStorage.removeItem("name");
			}

		var bt3=document.querySelector(".bt3");

			bt3.onclick=function(){

			    console.log(window.localStorage.getItem("name"));	
			}

		var bt4=document.querySelector(".bt4");

			bt4.onclick=function(){
				window.localStorage.clear();
			}

		// var bt5=document.querySelector(".bt5");

		// 	bt5.onclick=function(){
		// 		console.log( window.localStorage.key(1) );
		// 	}
	</script>

</body>
添加效果

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

获取效果

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

☞ sessionStorage

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

可以在同一个窗口下访问

数据大小为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

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

效果图

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