【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

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

效果图

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

相关推荐
码事漫谈3 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER22 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.1 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
tryCbest1 小时前
Html5实现弹出表单
html5
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead2 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室3 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站