HTML5中新增Javascript特性

摘要：和支持事件通知机制，可以将数据更新的通知发送给监听者。语言采用的是单线程模型，的目的，就是为创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。

localStorage

存储：
window.localStorage.setItem("key", "value");
取值：
window.localStorage.getItem("key");
删除：
window.localStorage.removeItem("key");
清除：
window.localStorage.clear();
长度：
window.localStorage.length 

sessionStorage

存储：
window.sessionStorage.setItem("key", "value");
取值：
window.sessionStorage.getItem("key");
删除：
window.sessionStorage.removeItem("key");
清除：
window.sessionStorage.clear();
长度：
window.sessionStorage.length

sessionStorate、localStorage、cookies三者区别：
1. sessionStorate和localStorage存储空间更大, 5M或者更大；cookie存储一般不能超过4kb。
2. sessionStorate和localStorage不会自动把数据发给服务器，仅为本地存储；cookie在每次http请求都会传送到服务端。
3. sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
4. sessionStorate和localStorage支持事件通知机制，可以将数据更新的通知发送给监听者。

优点：
1. 离线浏览 - 用户可在离线时浏览您的完整网站
2. 速度 - 缓存资源为本地资源，因此加载速度较快。
3. 服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源

    
    


    


浏览器会打印如下信息：
Creating Application Cache with manifest http://localhost:5555/index/cache.manifest
cache:1 Application Cache Checking event
cache:1 Application Cache Downloading event
cache:1 Application Cache Progress event (0 of 1) http://localhost:5555/images/default_pic.jpg
cache:1 Application Cache Progress event (1 of 1) 
cache:1 Application Cache Cached event

manifest属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名，但必须以正确的MIME类型提供。
cache.manifest文件配置如下：

CACHE MANIFEST
# 2010-06-18:v3

# Explicitly cached entries
/index.html
/images/default_pic.jpg

# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html

# All other resources (e.g. sites) require the user to be online. 
NETWORK:
*

# Additional resources to cache
CACHE:
/images/logo1.png
/images/logo2.png
/images/logo3.png

CACHE：
    这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。
NETWORK：
    此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。
FALLBACK：
    此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。

更新缓存

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user"s cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();  // The fetch was successful, swap in the new cache.
}

update()获取新的应用缓存
swapCache()将原缓存换成新缓存
此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。
上述过程需要对网页进行两次重新加载才能向用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。

为了避免重新加载两次的麻烦，可以设置监听器
// Check if a new cache is available on page load.
window.addEventListener("load", function(e) {
  window.applicationCache.addEventListener("updateready", function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm("A new version of this site is available. Load it?")) {
        window.location.reload();
      }
    } else {
      // Manifest didn"t changed. Nothing new to server.
    }
  }, false);
}, false);

var drag1 = document.getElementById("drag1");
var drag2 = document.getElementById("drag2");

drag1.addEventListener("dragover", function (event) {
    event.preventDefault();
}, false);

drag1.addEventListener("drop", function (event) {
    event.preventDefault();

    var id = event.dataTransfer.getData("id");
    drag1.appendChild(document.getElementById(id));
}, false)

drag2.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("id", event.target.id);
}, false);

event.dataTrasfer.setData()，设置一个key-value。
dragover事件，默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。
drop事件的默认行为是以链接形式打开。

JavaScript语言采用的是单线程模型，Web Worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。

主线程 main.js

var worker = new Worker("worker.js");

worker.postMessage("I am main.js");
worker.addEventListener("message", function (event) {
  console.log("main receive:" + event.data);
}, false);

子线程 worker.js

self.addEventListener("message", function (event) {
  console.log("worker receive:" + event.data);

  self.postMessage("I am worker.js");
}, false);

关闭主线程
worker.terminate();
关闭子线程
self.close();

客户端
var connection = new WebSocket("ws://localhost:5555", "echo-protocol");

connection.onopen = function (event) {
  console.log("open")
  connection.send("This is a client")
}

connection.onmessage = function (event) {
  console.log("message:" + event.data)
}

connection.onclose = function (event) {
  console.log("close")
}

服务端（node.js）
var express = require("express");
var app = express();
var http = require("http");
var server = http.createServer(app);
var WebSocketServer = require("websocket").server;

var wsServer = new WebSocketServer({
    httpServer: server
});

var connection;

wsServer.on("request", function(req){
  connection = req.accept("echo-protocol", req.origin);

  connection.on("message", function(message) {
    var msgString = message.utf8Data;

    console.log(msgString)
    connection.sendUTF(msgString);
  });
});

注：socket.io是目前最流行的WebSocket实现

history.pushState()

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

history.pushState()接收3个参数
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

var stateObj = {"page": "1"};
history.pushState(stateObj, "title", "?debug=1");

history.replaceState()

replaceState方法参数和pushState方法参数相同，但是会修改浏览历史中当前纪录。

history.replaceState(null, null, "?page=2");

history.state

history.pushState({page: 1}, null, "?page=1");

history.state
{page: 1}

popstate事件

每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

window.onpopstate = function (event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
};

// 或者

window.addEventListener("popstate", function(event) {
  console.log("location: " + document.location);
  console.log("state: " + JSON.stringify(event.state));
});