html5 api

history api

• back()
• forward()
• go(index)
• pushState(stateObject, title, url)
• replaceState(stateObject, title, url)

监听history change events:
pushState() and replaceState() will not cause the onpopstate event to be fired
window.onpopstate = function(event){

}

new form field

• email field <input type="email"></input>
• url field <input type="url"></input>
• number field <input type="number"></input>
  
  property : min,max,step

• range field <input type="range"></input>

  
  property: min, max, step

• tel field <input type="tel"></input>
• search field <input type="search"></input>

• date field <input type="data"></input>

• time field <input type="time"></input>

• datetime field <input type="datetime">
  
• month field <input type="month" name="monthField"/>
  
• week field <input type="week">
  

• color field <input type="color" name="colorField"/>

• combo box field

<label>
 Sex:
 <input name=sex list=sexes>
 <datalist id=sexes>
  <option value="Female">
  <option value="Male">
 </datalist>
</label>

new Attributes
- autofocus
- placeholder
- require
- multiple
- pattern
- autocomplete
- min
- max
- step
- form

<form id="theForm">

</form>
<input type="range" form="theForm">

local storage

• sessionStorage
  通过全局对象sessionStorage访问，浏览器关闭的时候，缓存失效
• localStorage
  通过全局对象localStorage访问，关闭浏览器后缓存仍然有效

添加缓存

localStorage.key = value  
localStorage[key] = value   
localStorage.setItem(key, value)

读取缓存

localStorage.key  
localStorage[key]  
localStorage.getItem(key)

删除缓存

delete localStorage.key
localStorage.removeItem(key)

清除所有缓存

localStorage.clear()

缓存事件监听

function onStorageEvent(storageEvent){
    alert("storage event");
}
或者
window.addEventListener('storage', onStorageEvent, false);

StorageEvent {
    key;          // name of the property set, changed etc.
    oldValue;     // old value of property before change
    newValue;     // new value of property after change
    url;          // url of page that made the change
    storageArea;  // localStorage or sessionStorage,
                  // depending on where the change happened.
}

html5消息

当页面包含多个iframe的时候，在这些个iframe之间进行通信

iframe.contentWindow.postMessage(message, origin):发消息
window.onmessage：接消息
 ```  

 ## html5 drag and drop
 ![](http://ww3.sinaimg.cn/large/b8e1f187gw1f34e8b6lsfj20c407ydgs.jpg)

   拖曳涉及到两个元素，被拖动的元素，以及拖动元素的目的地。
   要想一个元素可以被拖动，需要添加属性draggable="true"。   

var source = $(‘#source’); var target =$(‘#target’);

source.on(‘dragstart’, function(event){
//通过 event.originalEvent.dataTransfer可以传递数据
event.originalEvent.dataTransfer.setData(‘text/html’, $(this).prop(‘outerHTML’)); console.log($(event));
})

target.on(‘dragenter’,function(){
console.log(“enter”);
})

target.on(‘dragover’, function(){
event.preventDefault();
console.log(‘over’);
return false;
})

target.on(‘drop’, function(event){
console.log(event.originalEvent.dataTransfer.getData(‘text/html’));
$(this).append(event.originalEvent.dataTransfer.getData(‘text/html’));
})

## **Web Worker**

## **html Semantic elements**
html5新增了几个语义标签
- header
- footer
- article
- nav


##**html5 file api**
FileList
File
Blob
FileReader

- FileReader
    readAsText()
    readAsDataUrl()
    readAsArrayBuffer()

 通过FileReader.onload回调来返回文件内容  

 ```
var reader = new FileReader();
reader.onload = function(loadedEvent){
    console.log(loadedEvent.target.result)
}
reader.readAsText(File);