html5补充（本地存储·）

cxuyuanLch

已于 2022-03-04 11:20:56 修改

阅读量353

点赞数

分类专栏：笔记文章标签： css css3 html5

于 2022-03-04 10:30:14 首次发布

本文链接：https://blog.csdn.net/cxuyuanLch/article/details/123269824

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5语义化标签

HTML5新增的语义化标签主要有：
article>、<section、<nav、<aside、<header、<footer、<time等等…
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
语义化标准主要针对搜索引擎的
新标签在一个页面中可以使用多次
IE9中需要把元素转换成块级元素
移动端更喜欢用这些标签
H5新增标签不止上面这些准

HTML5 浏览器支持

所有现代浏览器都支持 HTML5。
此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。
正因如此，您可以帮助老式浏览器处理”未知的“ HTML 元素。

video标签
video标签的作用：播放视频。

第一种格式：

<video src="" autoplay="autoplay"></video>

1
第一种格式中video标签的属性：

src属性用于高速video标签需要播放的视频地址；
autoplay属性用于告诉video标签是否需要自动播放视频；
controls属性用于告诉video标签是否需要显示控制条；
poster属性用语告诉video标签在视频没有播放之前显示的占位图片；
loop属性用于告诉video标签在视频播放完毕之后是否循环播放，不能控制其播放进度暂停静音之类，一般用于广告；
preload属性用于预加载视频，要注意preload属性与autoplay属性相冲，若设置了autoplay属性则preload属性会失效；
muted属性用于静音；
width属性宽度；
height属性高度。
video标签的是第二种格式存在的意义是：解决浏览器适配问题。video元素支持三种视频格式，可以把这三种格式都通过source标签指定给video标签，以后当浏览器播放视频时就会从这三种中选择一种自己支持的格式来播放。

<video autoplay="autoplay" controls="controls" poster="" loop="loop" muted="muted" width="" height="">
    <source src="" type="video·/webm">
    <source src="" type="video·/mp4">
    <source src="" type="video·/ogg">
</video>

audio标签：用于播放音频。有三个属性在audio中不能使用：height，width，poster。

详情和概要标签
作用：利用summary标签来描述概要信息，利用datails标签来描述详情信息。默认情况下是折叠只显示概要，想看见详情必须点击。

本地存储：
什么是 HTML 本地存储？
通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。

本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，看一下 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

如：

// 存储
localStorage.setItem("nodatename", "lch");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("nodatename");

w3cschool例子：

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";
    } else {
        document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">请点击这里！</button></p>
<div id="result"></div>
<p>请点击按钮使计数器递增。</p>
<p>请关闭浏览器或标签页，然后再试一次，计数器将继续计数（不会重置）。</p>
</body>
</html>

sessionStorage 对象
sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

下例在当前 session 中对用户点击按钮进行计数：

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " +
sessionStorage.clickcount + " 次。";

webworker：
众所周知，Javascript是运行在单线程环境中，无法同时运行多个脚本。
假设用户点击一个按钮，触发了一段用于计算的Javascript代码，那么在这段代码执行完毕之前，页面是无法响应用户操作的。
但是，如果将这段代码交给Web Worker去运行的话，那么情况就不一样了：浏览器会在后台启动一个独立的worker线程来专门负责这段代码的运行，因此，页面在这段Javascript代码运行期间依然可以响应用户的其他操作，从而达到多线程运行js。

webworker定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。
其中， Web Worker 规范中定义了两类工作线程，分别是专用线程Dedicated Worker和共享线程 Shared Worker。
其中，Dedicated Worker只能为一个页面所使用，而Shared Worker则可以被多个页面所共享。

WebWorker 可以做什么呢？
可加载一个JS，进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信，
可在worker中通过importScripts(url)加载另外的脚本文件
可使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
可使用XMLHttpRequest来发送请求
可访问navigator的部分属性
可以close()结束线程
navigator对象：可使用localStorage和sessionStorage+XMLHttpRequest可以在线程中使用Ajax
预先抓取/或缓存数据
分析视频，音频数据
背景 I/O ，网络服务轮询
处理较大数组或超大 JSON 响应
中的图片过滤
更新本地网络数据库中的多行内容等等·

但是：它不能跨域加载JS
且worker内代码不能访问DOM
各个浏览器对Worker的实现不大一致，例如火狐里允许worker中创建新的worker,而Chrome中不行，不是每个浏览器都支持这个新特性

什么是应用程序缓存？
使用应用程序缓存，通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本。
HTML5 引入了应用程序缓存，这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源.

如：

WebWorker 使用
Worker创建 var worker = new Worker('work1.js')
Worker启动 worker.postMessage()
Worker事件 worker.addEventListener('message'/'error', function(e) {e.data;}, false);