隔崎、Web存儲(chǔ)API
對(duì)于任何程序來說，能夠?qū)崿F(xiàn)數(shù)據(jù)存儲(chǔ)是必備功能之一弄捕，并且在需要的時(shí)候能夠提供數(shù)據(jù)僻孝。但在過去的Web客戶端，沒有能夠支持?jǐn)?shù)據(jù)存儲(chǔ)的有效機(jī)制守谓，cookie曾用來在客戶端存儲(chǔ)少量信息穿铆，但受其性質(zhì)所限，cookie只能存儲(chǔ)一些短的字符串
在HTML5中提供了Web存儲(chǔ)API斋荞，它是在cookie之上的增強(qiáng)荞雏。這個(gè)API允許我們?cè)谟脩舻挠脖P上存儲(chǔ)數(shù)據(jù)，并在日后使用這些數(shù)據(jù)平酿。
-
API可以分成兩個(gè)部分：
1）信息必須且只在會(huì)話過程中使用—sessionStorage
當(dāng)瀏覽器窗口關(guān)閉時(shí)凤优，數(shù)據(jù)全部丟失
2）信息必須長(zhǎng)期保存且由用戶決定時(shí)長(zhǎng)—localStorage
關(guān)閉瀏覽器窗口時(shí)，數(shù)據(jù)繼續(xù)使用
數(shù)據(jù)只能由用戶刪除
三蜈彼、sessionStorage
sessionStorage這部分API就像是會(huì)話cookie的替代筑辨。
cookie以及sessionStorage都是在特定的時(shí)間段內(nèi)保持?jǐn)?shù)據(jù)可用。但cookie使用瀏覽器作為引用幸逆，而sessionStorage使用單個(gè)窗口作為引用棍辕，這就意味著暮现，窗口關(guān)閉之后，sessionStorage就不能再使用痢毒。
方法
1）設(shè)置數(shù)據(jù)
setItem(key,value)
key - 作為存儲(chǔ)數(shù)據(jù)的唯一標(biāo)識(shí)
value - 存儲(chǔ)的數(shù)據(jù)內(nèi)容(number/string)
2) 根據(jù)標(biāo)識(shí)獲取數(shù)據(jù)
var value = getItem(key);
3) 刪除指定標(biāo)識(shí)的數(shù)據(jù)
removeItem(key);
4）將存儲(chǔ)系統(tǒng)的所有數(shù)據(jù)刪除
clear()
5）根據(jù)索引值返回key
var key = key(index);
-
屬性
返回當(dāng)前存儲(chǔ)系統(tǒng)的數(shù)據(jù)個(gè)數(shù)
length
四送矩、localStorage
提供的屬性和方法與sessionstorage一致
-
storage事件
實(shí)現(xiàn)多個(gè)窗口之間共享數(shù)據(jù)內(nèi)容
問題：
數(shù)據(jù)安全性低
目前除Safari瀏覽器支持該事件，其他瀏覽器不支持
五哪替、Web socket
-
網(wǎng)絡(luò)協(xié)議
客戶端與服務(wù)端進(jìn)行通信的協(xié)議
HTTP協(xié)議 - 目前互聯(lián)網(wǎng)中最廣泛的協(xié)議
SOCKET協(xié)議 - 應(yīng)用于實(shí)時(shí)即時(shí)通信 -
HTTP協(xié)議的問題
1）無狀態(tài)
本次客戶端的請(qǐng)求,服務(wù)器端不知道客戶端的上次請(qǐng)求
2）短連接
指通訊雙方有數(shù)據(jù)交互時(shí)栋荸，就建立一個(gè)連接，數(shù)據(jù)發(fā)送完成后凭舶，則斷開此連接晌块，即每次連接只完成一項(xiàng)業(yè)務(wù)的發(fā)送。
如果建立的是短連接帅霜，服務(wù)器無法主動(dòng)給客戶端發(fā)送信息
-
web Socket
實(shí)現(xiàn)了用HTTP不容易實(shí)現(xiàn)的服務(wù)器端的數(shù)據(jù)推送等智能通訊技術(shù)
-
Web Socket的特點(diǎn)
1）這個(gè)連接是實(shí)時(shí)的匆背，也是永久的
2）服務(wù)端可以主動(dòng)推送消息
3）服務(wù)端不需要輪詢客戶端的請(qǐng)求
4）服務(wù)器端與客戶端之間通信無需重新建立連接 -
使用WorkerMan,設(shè)置socket客戶端
1）設(shè)置php環(huán)境變量
2）下載并解壓workerMan
http://www.workerman.net/workerman workerMan學(xué)習(xí)文檔 http://doc3.workerman.net/getting-started/simple-example.html3）在任意位置創(chuàng)建http_test.php文件，并將課件中的start.text文件中內(nèi)容復(fù)制到該文件中（位置任意身冀，能引用到Workerman文件中的Autoloader.php即可
-
運(yùn)行上建的文件钝尸，啟動(dòng)workerMan
執(zhí)行workerMan
-
六、Web socket的使用
-
調(diào)用 WebSocket 對(duì)象的構(gòu)造器來建立與服務(wù)器之間的通信連接
var webSocket = new WebSocket (“ws://127.0.0.1: 8005/socket”) ;
請(qǐng)求地址(url)不能再是http://開頭,Web Sockets的請(qǐng)求頭(url的開頭)
ws:// - Web Socket的縮寫
wss:// - 表示加密協(xié)議 -
使用 WebSocket 對(duì)象的 send() 方法對(duì)服務(wù)器發(fā)送數(shù)據(jù)
webSocket.send (“data”);
send() 方法只能發(fā)送文本數(shù)據(jù)搂根。,使用JSON對(duì)象把任何JavaScript,對(duì)象轉(zhuǎn)換稱文本數(shù)據(jù)后進(jìn)行發(fā)送珍促。
-
通過WebSocket對(duì)象的close() 方法來關(guān)閉socket，切斷通信連接：
webSocket.close( ) ;
-
Web Socket事件
1）通過獲取 onmessage事件來接收服務(wù)器傳來的數(shù)據(jù)：
webSocket.onmessage = function( event ){ var data = event.data ; }2）通過獲取 onopen 事件來監(jiān)聽 socket 的打開事件：
webSocket.onopen = function( event ){ }3）通過獲取onclose事件來監(jiān)聽socket 的關(guān)閉事件：
webSocket.onclose = function( event ){ }4）通過onerror事件剩愧，監(jiān)聽客戶端與服務(wù)器端連接出錯(cuò)
webSocket.onerror = function( event ){ }
-
通過讀取 readyState 的屬性值來獲取 WebSocket 對(duì)象的狀態(tài)仁卷。
CONNECTING（數(shù)字值為0）穴翩，表示正在連接。
OPEN（數(shù)字值為1）锦积，表示已建立連接芒帕。
CLOSING（數(shù)字值為2），表示正在關(guān)閉連接丰介。
CLOSED（數(shù)字值為2）背蟆，表示已關(guān)閉連接。
一首好聽的輕柔你的歌曲
http://music.163.com/#/song?id=437292675
