2012-03-21

HTML5新特性

WebSocket

HTML5开始支持WebSocket，在这之前只能通过长连接或者flash控件去做通讯，WebSocket使用的业务场景最多应该是聊天室了。

格式

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

var Socket = new WebSocket(url, [protocal] );

// 琼台博客 www.qttc.net

if ("WebSocket" in window)
{
  alert("WebSocket is supported by your Browser!");
  
  // Let us open a web socket
  var ws = new WebSocket("ws://localhost:9998/echo");

  ws.onopen = function()
  {
    // Web Socket is connected, send data using send()
    ws.send("Message to send");
    alert("Message is sent...");
  };

  ws.onmessage = function (evt) 
  { 
    var received_msg = evt.data;
    alert("Message is received...");
  };

  ws.onclose = function()
  { 
    // websocket is closed.
    alert("Connection is closed..."); 
  };

  window.onbeforeunload = function(event) {
    socket.close();
  };
}

else
{
  // The browser doesn't support WebSocket
  alert("WebSocket NOT supported by your Browser!");
}

Worker

出这个的目的估计是想提升浏览器端JavaScript运行性能。可惜这个又点鸡肋，在Worker中不能操作DOM，只能运行纯JavaScript代码

var myWorker = new Worker('worker.js');

API文档请看这里

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Doctype

以前的文档类型声明是这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

现在，只需要这样

<!DOCTYPE html>

Placeholders

在Input中要提示输入信息可以这样

<input placeholder="Input your full name" />

Local Storage

以前只有cookie，但容量不够，现在localStorage比cookie强悍多了

// 琼台博客 www.qttc.net

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
console.log(localStorage.getItem("lastname"));