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

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

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

效果图

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

相关推荐
brzhang6 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms7 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in7 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4169 小时前
HTML面试题
前端·html
张可9 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课9 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿10 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我10 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法