HTML5新特性基础学习笔记下

来源：互联网发布：perl安装 linux 编辑：程序博客网时间：2024/06/05 08:27

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 MANIFESTCACHE:index.htmljs.jsNETWORK: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