HTML5新特性基础学习笔记下

最新推荐文章于 2021-12-09 15:59:53 发布

月迷津渡丶

最新推荐文章于 2021-12-09 15:59:53 发布

阅读量506

点赞数

分类专栏： Web 文章标签： HTML5 Javascript

本文链接：https://blog.csdn.net/oYueMiJinDu/article/details/43676101

版权

Web 专栏收录该内容

145 篇文章 0 订阅

订阅专栏

6.Web储存

客户端储存数据
1.两种方式
1):localStorage - 没有时间限制的数据存储
2):sessionStorage - 针对一个session的存储数据
2.和cookie做对比
之前,这些都是由cookie完成的.但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高

localStorage
1.存储特点:
localStorage方法存储的数据没有时间限制.第二天,第二周或者下一年之后,依然可用

<textarea style="width:200px; height: 200px" id="ta"></textarea>
    <button id="btn">保存</button>

var ta;
var btn;
window.onload = function () {
    ta = document.getElementById("ta");
    if(localStorage.text1){
        ta.value = localStorage.text1;
    }

    btn = document.getElementById("btn");
    btn.onclick = function () {
        localStorage.text1 = ta.value;
    }
}

sessionStorage
1.存储特点
sessionStorage方法针对一个session进行数据存储.当用户关闭浏览器窗口后,数据会被删除.

<span id="txt">0</span>
<button id="addbtn">add</button>

var num = 0;
var txt;
var btn;

window.onload = function () {
    txt = document.getElementById("txt");
    btn = document.getElementById("addbtn");
    if(sessionStorage.num){
         num = sessionStorage.num;
        showNum();
    }
    btn.onclick = function () {
        num ++ ;
        sessionStorage.num = num;
        showNum();
    }
}

function showNum(){
    txt.innerHTML = num;
}

7.应用缓存与Web Workers

应用缓存
1.什么是应用程序缓存:
HTML引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网连接时进行访问
2.应用缓存的优势:
1):离线浏览 - 用户可在应用离线时使用它们
2):速度 - 已缓存资源加载得很快
3):减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
3.实现缓存:
如需启用应用程序缓存,请在文档的<html>标签中包含manifest属性
manifest文件的建议的文件扩展名是:".appcache";
4.Manifest文件:
1):CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2):NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
3):FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(如404)

<html manifest="index.appcache">

    <script src="js.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="h1">Hello HTML5!</h1>
</body>

index.appcache:

CACHE MANIFEST

CACHE:
index.html
js.js

NETWORK:
style.css

Web Workers
1.什么是Web Worker?
web worker 是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能
2.方法:
postMessage() - 它用于向HTML页面传回一段消息
terminate() - 终止web worker,并释放浏览器/计算机资源
3.事件:
onmessage

<div id="numDiv">0</div><br>
<button id="start">开</button>
<button id="stop">关</button>

var numDiv;
var work;

window.onload = function () {
    numDiv = document.getElementById("numDiv");
    document.getElementById("start").onclick = startWorker;
    document.getElementById("stop").onclick = function () {
        if(work){
            work.terminate();
            work = null;
        }
    }
}

function startWorker() {
    if(work){
        return;
    }
    work = new Worker("count.js");

    work.postMessage(numDiv.innerText);//获取DIV的内容
    work.onmessage = function (e) {
        numDiv.innerHTML = e.data;
    }
}

count.js:

var countNum;

function count() {
    onmessage = function (e) {
        countNum = e.data;
        count2();

    }
}

function count2(){
    postMessage(countNum);
    countNum++;
    setTimeout(count2, 1000);
}

count();

8.服务器推送事件

HTML5服务器推送事件介绍
1.HTML5服务器推送事件介绍:
服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务端时时推送数据到浏览器端
2.传统的服务端推送数据技术:
WebSocket:WebSocket规范是HTML5中一个重要组成部分,已经被很多主流浏览器所支持,也有不少基于WebSocket开发的应用.正如名称所表示的一样,WebSocket所用的套接字连接,基于TCP协议.使用WebSocket之后,实际上在服务器端和浏览器之间建立一个套接字连接,可以进行双向的数据传输.WebSocket的功能是很强大的,使用起来也灵活,可以适用于不同的场景.不过WebSocket技术也比较复杂,包括服务器端和浏览器端的实现都不同于一般的Web应用.

HTTP协议:简易轮询,即浏览器端定时向服务器端发出请求,来查询是否有数据更新.这种做法简单,可以在一定程度上解决问题.不过对于轮训的时间间隔需要进行仔细考虑.轮训的间隔过长,会导致用户不能几十接收到更新的数据;轮询的建个过短,会导致查询请求过多,增加服务器的负担

HTML5服务器推送事件实现
1.杜武器带码头:
header('Content-Type:text/event-stream');
2.EventSource事件:
onopen 服务器的链接被打开
onmessage 接收消息
onerror 错误发生

月迷津渡丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新特性基础学习笔记下

6.Web储存客户端储存数据1.两种方式 1):localStorage - 没有时间限制的数据存储 2):sessionStorage - 针对一个session的存储数据2.和cookie做对比之前,这些都是由cookie完成的.但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高
复制链接

扫一扫