李洋学习笔记-HTML5基础

阅读数:1006 发布时间:2016-06-29 20:56:01

作者:w1ly 标签: html5 李洋

HTML5

存储类

HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换

1. Web Storage

LocalStorage是本地存储

特点

API使用

localStorage.setItem('key','value'); //存入数据

var valueLocal = localStorage.getItem("key");  //读取键名为key的数据

localStorage.key(0);  //读取localStorage内索引为0的数据

localStorage.removeItem('key');  //清除键名为key的数据

localStorage.clear();  //清除所有数据

当储存的数据发生变化时,会触发storage事件

Window.addEventlistener('storage',function (e) {
  console.log(e.key);   // 输出保存发生变化的的键名
})

event对象的属性还包括

如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信

sessionStorage是会话存储

特点

同源的同窗口(或tab)中,始终存在的数据
只要浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。
关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。

sessionStorage的API与localStorage的一致

2. cookie

cookie指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)

特点

浏览器的同源政策规定,两个网址只要域名相同和端口相同,就可以共享Cookie。

注意,这里不要求协议相同。也就是说,http://example.com设置的Cookie,> 可以被https://example.com读取

3. 离线缓存

1.manifest

首先manifest是一个后缀名为minifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,会将按照manifest文件的规则,像文件保存在本地,从而在没有网络链接的情况下,也能访问页面

当我们第一次正确配置app cache后,当我们再次访问该应用时,浏览器会首先检查manifest文件是否有变动,如果有变动就会把相应的变得跟新下来,同时改变浏览器里面的app cache,如果没有变动,就会直接把app cache的资源返回

特点

使用

<html manifest=”example.appcache”></html>

2.Application Cache

可以通过window.applicationCache 对象来访问浏览器的app cache
可以查看 status 属性来获取cache的当前状态:

var appCache = window.applicationCache;  
switch (appCache.status) {  
  case appCache.UNCACHED: // UNCACHED == 0  
    return 'UNCACHED';  
    break;  
  case appCache.IDLE: // IDLE == 1  
    return 'IDLE';  
    break;  
  case appCache.CHECKING: // CHECKING == 2  
    return 'CHECKING';  
    break;  
  case appCache.DOWNLOADING: // DOWNLOADING == 3  
    return 'DOWNLOADING';  
    break;  
  case appCache.UPDATEREADY:  // UPDATEREADY == 4  
    return 'UPDATEREADY';  
    break;  
  case appCache.OBSOLETE: // OBSOLETE == 5  
    return 'OBSOLETE';  
    break;  
  default:  
    return 'UKNOWN CACHE STATUS';  
    break;  
};  

applicationCache.update()//更新缓存,此操作将尝试更新用户的缓存(前提是已更改清单文件)

当applicationCache.status 处于 UPDATEREADY 状态时 applicationCache.swapCache() 即可将原缓存换成新缓存。

通信类

1. SSE(Server-Sent Event)

Server-Sent 事件 - 单向消息传递

Server-Sent 事件指的是网页自动获取来自服务器的更新
Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新

//创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
var source=new EventSource("demo_sse.php");
//每接收到一次更新,就会发生 onmessage 事件
source.onmessage=function(event)
  {
  //当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
  document.getElementById("result").innerHTML+=event.data + "<br />";
  };

服务器端代码

<?php
header('Content-Type: text/event-stream');//把报头 "Content-Type" 设置为 "text/event-stream"
header('Cache-Control: no-cache');//规定不对页面进行缓存

$time = date('r');
echo "data: The server time is: {$time}

";//输出发送日期(始终以 "data: " 开头)
flush();//向网页刷新输出数据
?>
2. Websocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成

特点

应用

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 

// 打开Socket 
socket.onopen = function(event) { 

  // 发送一个初始化消息
  socket.send('I am the client and I am listening!'); 

  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 

  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 

  // 关闭Socket.... 
  socket.close() 
};
3. PostMessage

PostMessage是Windows API(应用程序接口) 中的一个常用函数,用于将一个消息放入(寄送)到与指定窗口创建的线程相联系消息队列里,不等待线程处理消息就返回,是异步消息模式。消息队列里的消息通过调用GetMessage和PeekMessage取得

计算类

1. Web Worker

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行
web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务

Web workers可分为两种类型

运用

  1. 创建 web worker 文件 demo_workers.js
var i=0;

function timedCount()
{
i=i+1;
postMessage(i);//postMessage() 方法 - 它用于向 HTML 页面传回一段消息
setTimeout("timedCount()",500);
}

timedCount();
  1. 创建 Web Worker 对象
//检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码
if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }
//向 web worker 添加一个 "onmessage" 事件监听器  
w.onmessage=function(event){
//当 web worker 传递消息时,会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据
document.getElementById("result").innerHTML=event.data;
};
//终止 Web Worker
w.terminate();

由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:

相关文章推荐: