HTML(5)基础知识

  • A+
所属分类：编程茶楼

HTML(5)基础知识

{callout color=“#f0ad4e”}
前两部分还没整理后续整理完再发布！
{/callout}

一、cookie、localStorage和sessionStorage的区别和联系

1、localStorage(本地存储)：

localStorage生命周期是永久，除非用户在浏览器上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与服务器的通信。

2、sessionStorage(会话存储)：

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与服务器的通信。源生接口可以接受，可再次封装来对Object和Array有更好的支持。

3、localStorage(本地存储)和sessionStorage(会话存储)的联系

相同和不同点：

  • **存储大小相同：**localStorage和sessionStorage的存储数据大小一般都是：5MB
  • **存储位置相同：**localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
  • **存储内容类型相同：**localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
  • **获取方式不同：**localStorage：window.localStorage;；sessionStorage：window.sessionStorage;
  • **应用场景不同：**localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而sessionStorage：敏感账号一次性登录
  • **作用域的不同：**不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的

共同优点：

  • **存储空间更大：**cookie为4KB，而WebStorage是5MB
  • **节省网络流量：**WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量
    对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便
  • **快速显示：**有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快
  • **安全性：**WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题
    WebStorage提供了一些方法，数据操作比cookie方便
  • setItem (key, value) —— 保存数据，以键值对的方式储存信息。
  • getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
  • removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
  • clear () —— 删除所有的数据
  • key (index) —— 获取某个索引的key

4、cookie

**概念：**HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

cookie的构成如下：

  • 名称： name(不区分大小写,但最好认为它是区分的)
  • 值: value(通过URL编码:encodeURIComponent)
  • **域
  • 路径
  • **失效时间:**一般默认是浏览器关闭失效,可以自己设置失效时间
  • **安全标志:**设置安全标志后只有SSL连接的时候才发送到服务器

**cookie的作用:**主要用于保存登录信息

**cookie的优点：**具有极高的扩展性和可用性，通过良好的编程，控制保存在cookie中的session对象的大小，通过加密和安全传输技术，减少cookie被破解的可能性，只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失，控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie

**cookie的缺点：**cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用
**有些状态不可能保存在客户端。**例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用

三者之间的区别与联系

1、cookie在浏览器与服务器之间来回传递
sessionStorage和localStorage不会把数据发给服务器，仅在本地保存

2、数据有效期不同
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage：仅在当前浏览器窗口关闭前有效
localStorage 始终有效，长期保存

3、cookie数据还有路径的概念，可以限制cookie只属于某个路径下
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

4、作用域不用
sessionStorage不在不同的浏览器窗口中共享
localStorage在所有同源窗口中都是共享的
cookie也是在所有同源窗口中都是共享的
Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

二、video和audio的使用

HTML5 引入了audio和video标签在页面中嵌入音频和视频，不用再使用Flash等插件播放媒体文件

1、Video视频

									 	Video属性
禁止下载：controlslist=“nodownload”
禁止全屏：controlslist=“nodownload nofullscreen”（controlslist可多选）
自动播放: autoplay
默认静音: muted
循环播放: loop
预加载: preload
贴图:	poster=“poster.jpg”
音量控制: var video = document.getElementById('_volume');video.volume = 0;(取值范围：0 到 1，0 是静音，0.5 是一半的音量，1 是最大音量（默认值）)
播放时间控制: var vedio = document.getElementById('_time');vedio.currentTime=600;视频当前正在播放的时间（单位：s），进度条拖动显示的时间值
播放地址切换var video = document.getElementById('_src');
setTimeout(() =>  {video.src='http://vue.hyfarsight.com/webpack%E4%B8%80.mp4'}, 6000);延时6秒后播放新的地址

										Video事件
loadstart：		视频查找，当浏览器开始加载资源时触发
durationonchange：时长变化，当指定资源时长发生变化时触发 => NAN变为实际时长；
						var video = document.getElementById('_time');
							console.log(video.duration);
			video.addEventListener('durationchange',function(e){console.log(vedio.duration); })
loadedmetadata：	元数据加载，当指定资源的元数据已加载时触发，元数据包括时长/尺寸/文本轨道等信息值
loadeddata：	 	视频下载监听，当当前帧的数据已加载，但没有足够的数据来播放指定资源的下一帧时触发
progress：		浏览器下载监听，当浏览器正在下载指定资源时触发
canplay：		浏览器下载监听，当浏览器正在下载指定资源时触发
canplaythrough：	 可流畅播放，当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定资源时触发
play：			播放监听
pause：			暂停监听
seeking：		查找开始，当用户开始移动、跳跃到资源中新的位置时触发
seeked：			查找结束，当用户已经移动、跳跃到视频中新的位置时触发
waiting：		视频加载等待，当视频由于需要缓冲下一帧而停止，等待时触发
playing：		当视频在已经因缓冲而暂停或停止后已就绪时触发
timeUpdate：	  	目前的播放位置已更改时，播放时间更新
ended：			播放结束
error：			播放错误
volumechange：	音量改变时
stalled：		当浏览器尝试获取媒体数据，但数据不可用时
ratechange：		当视频的播放速度已更改时

										videoCSS控制按钮
	/* 全屏按钮 */
	
	video::-webkit-media-controls-fullscreen-button {
	    display: none;
	}
	/* 播放按钮 */
	
	video::-webkit-media-controls-play-button {
	    display: none;
	}
	/* 进度条 */
	
	video::-webkit-media-controls-timeline {
	    display: none;
	}
	/* 观看的当前时间 */
	
	video::-webkit-media-controls-current-time-display {
	    display: none;
	}
	/* 剩余时间 */
	
	video::-webkit-media-controls-time-remaining-display {
	    display: none;
	}
	/* 音量按钮 */
	
	video::-webkit-media-controls-mute-button {
	    display: none;
	}
	
	video::-webkit-media-controls-toggle-closed-captions-button {
	    display: none;
	}
	/* 音量的控制条 */
	
	video::-webkit-media-controls-volume-slider {
	    display: none;
	}
	/* 所有控件 */
	
	video::-webkit-media-controls-enclosure {
	    display: none;
	}

html

2、audio音频

										audio音频属性
src	播放资源的url地址
preload	预加载
loop	循环播放-当前播放结束后重新播放
controls	是否显示控件
autoplay	自动播放
duration	媒体总时长，无法获取时返回NAN
paused	媒体被暂停，返回true，否则返回false
ended	媒体文件播放完毕
muted	用来获取是否为静音状态，值为bool
volume	控制音量大小，0–1
startTime	返回起始的播放时间
error	返回错误代码
currentTime	用来获取或者控制当前的播放时间，单位为秒（s）
currentSrc	以字符串形式返回正在播放或者已经加载的文件
										audio音频事件
										
load()	加载资源
play()	播放
pause()	暂停播放
canPlayType()	测试是否支持特定类型文件
loadstart	客户端开始请求数据
progress	客户端正在请求数据，缓冲
play	播放
pause	暂停
ended	结束
timeupdate	当前播放时间发生改变的时候
canplaythrough	资源已经载入完成
canplay	缓冲至目前的可播放状态
html
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin