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

最新推荐文章于 2024-06-02 23:26:49 发布

Mikuc

最新推荐文章于 2024-06-02 23:26:49 发布

阅读量351

点赞数 4

分类专栏： HTML5 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_68467925/article/details/139049662

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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()                  清空内容
<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

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

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

效果图

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

Mikuc

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
【html5】08-本地存储和操作多媒体

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

扫一扫