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.html
js.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 错误发生

HTML5新特性基础学习笔记下相关推荐

HTML5新特性基础学习笔记上
1.HTML5音频视频音频播放 1.Audio(音频) HTML5提供了播放音频文件的标准 2.control(控制器) control属性供添加播放,暂停和音量控件 3.标签: <audio ...
HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签基于菜鸟教程的个人向学习笔记菜鸟教程文章目录 ...
PHP7新特性基础学习
文章目录前言一.PHP 标量类型与返回值类型声明和运算符二.PHP 常量数组三.PHP 匿名类四.PHP函数杂项五.PHP 7 异常六.PHP 7 use 语句七.PHP 7 Sess ...
HTML基础（一）--HTML5新特性和语义化
一.语义化概念 HTML5的语义化指的是合理正确的使用语义化标签来创建页面标签,正确的标签做正确的事,有利于SEO 二.语义化标签 header .nav.main(文档的主体).arcticle.s ...
【阿里云大学课程】前端必知——HTML5新特性完整视频教程（音频、视频、画布、web存储、动画……）...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
html5储存类型特点,避免踩雷！你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
html5新特性有哪些？
一省:HTML 1. html5新特性有哪些? 新增语义化标签:header.nav.aside.article.section.footer 拖放属性:drag/drop.拖放是一种常见的特性,即抓 ...
HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type=range]）
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
HTML5新特性归纳和同类比较
第一章 HTML5定义什么是 HTML5? HTML5 是下一代HTML标准. HTML , HTML 4.01的上一个版本诞生于1999年.自从那以后,Web世界已经经历了巨变. HTML5 仍处 ...

HTML5新特性基础学习笔记下

6.Web储存

7.应用缓存与Web Workers

8.服务器推送事件

HTML5新特性基础学习笔记下相关推荐

最新文章

热门文章