詳說 Cookie, LocalStorage 與 SessionStorage
在HTML5的時(shí)代,重新認(rèn)識Cookie
HTML5
HTML5是超文本標(biāo)記語言的第五次重大修改。
設(shè)計(jì)目的
HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn),如video,audio,canvas標(biāo)記。還引進(jìn)了新的功能,可以真正的改變用戶與文檔的交互方式,包括:
- 新的解析規(guī)則增強(qiáng)了靈活性
- 新屬性
- 淘汰過時(shí)的或冗余的屬性
- 一個(gè)HTML5文檔到另一個(gè)文檔間的拖放功能
- 離線編輯
- 信息傳遞的增強(qiáng)
- 詳細(xì)的解析規(guī)則
- 多用途互聯(lián)網(wǎng)郵件擴(kuò)展(MIME)和協(xié)議處理程序注冊
- 在SQL數(shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)的通用標(biāo)準(zhǔn)(Web SQL)
特性
語義特性
賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。
本地存儲(chǔ)特性
LocalStorge Indexed DB
設(shè)備兼容特性
例如定位,操作攝像頭等。
連接特性
websocket
多媒體特性
audio video
性能
XMLHttpRequest2
變化
- 新增header,footer,dialog,aside,figure等
- b和i標(biāo)簽仍然保留,但是意義不同,現(xiàn)在只是為了將一段文字標(biāo)識出來,而不是為了設(shè)置粗體斜體。
- 全新的表單輸入對象,包括日期,URL,Email地址
- 本地?cái)?shù)據(jù)庫
- canvas
- ...
標(biāo)簽和元素變化
DOCTYPE
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
<!doctype html>
文檔編碼
XHTML
<meta http-equiv="content-type" content="text/html" charset="utf-8">
HTML5
<meta charset="UTF-8">
具有boolean值的屬性
例如disable,readonly等只寫屬性不寫屬性值時(shí)為true
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
省略屬性值的引號
屬性值可以用單引號或者雙引號,在屬性值不包括<,>,=,',=時(shí)可以省引號
(但是不建議省略)
<input type=text>
常見新增元素
| 元素 | 描述 |
|---|---|
| canvas | 標(biāo)簽定義圖形,比如圖表和其他圖像?;贘S的繪圖API |
| audio | 定義音頻內(nèi)容 |
| video | 定義視頻(video或者movie) |
| source | 定義多媒體資源<video>和<audio> |
| embed | 定義嵌入的內(nèi)容,比如插件 |
| datalist | 定義選項(xiàng)列表。與input元素配合使用該元素,來定義input可能的值 |
input新增type
- url
- number
- range
- Date Picker
date
month
week
time
datatime
不再使用frame框架
- frame
- frameset
- noframes
新增屬性
全局屬性
- contentEditable
- designMode
- hidden
- spellcheck
- tabindex
表單相關(guān)
- autofocus
- placeholder
- form
- required
- formaction,formenctype,formmethod,formtarget,formnovalidate
- novalidate