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);