Web存儲API與 Web socket

Web存儲API

  1. 對于任何程序來說，能夠?qū)崿F(xiàn)數(shù)據(jù)存儲是必備功能之一，并且在需要的時候能夠提供數(shù)據(jù)。但在過去的Web客戶端，沒有能夠支持?jǐn)?shù)據(jù)存儲的有效機(jī)制，cookie曾用來在客戶端存儲少量信息，但受其性質(zhì)所限，cookie只能存儲一些短的字符串

  2. 在HTML5中提供了Web存儲API，它是在cookie之上的增強(qiáng)。這個API允許我們在用戶的硬盤上存儲數(shù)據(jù)，并在日后使用這些數(shù)據(jù)。

  3. API可以分成兩個部分：

    1）信息必須且只在會話過程中使用 — sessionStorage

    當(dāng)瀏覽器窗口關(guān)閉時，數(shù)據(jù)全部丟失

    2）信息必須長期保存且由用戶決定時長 — localStorage

    關(guān)閉瀏覽器窗口時，數(shù)據(jù)繼續(xù)使用

    數(shù)據(jù)只能由用戶刪除

<i>打開瀏覽器，按 F12就會出現(xiàn)，下面的窗口，點(diǎn)擊 Resources 就可以查看到你的瀏覽器上存儲的 sessionStorage 、 localStorage 信息</i>


Paste_Image.png

sessionStorage

  1. sessionStorage這部分API就像是會話cookie的替代。

  2. cookie以及sessionStorage都是在特定的時間段內(nèi)保持?jǐn)?shù)據(jù)可用。但cookie使用瀏覽器作為引用，而sessionStorage使用單個窗口作為引用，這就意味著，窗口關(guān)閉之后，sessionStorage就不能再使用。

  3. 使用方法

  • 設(shè)置數(shù)據(jù)

      sessionStorage.setItem(key,value)

  key - 作為存儲數(shù)據(jù)的唯一標(biāo)識
  value - 存儲的數(shù)據(jù)內(nèi)容(number/string)

    • 根據(jù)標(biāo)識獲取數(shù)據(jù)

      var value = getItem(key);

    • 刪除指定標(biāo)識的數(shù)據(jù)

      sessionStorage.removeItem(key);

采用循環(huán)的方式來移除，for + if 實(shí)現(xiàn)

    • 將存儲系統(tǒng)的所有數(shù)據(jù)刪除

       sessionStorage.clear()

    • 根據(jù)索引值返回key

       var key = sessionStorage.key(index);

    • length屬性

      返回當(dāng)前存儲系統(tǒng)的數(shù)據(jù)個數(shù)

sessionStorage.length

localStorage

  1. 提供的屬性和方法與sessionstorage一致

  2. storage事件

    實(shí)現(xiàn)多個窗口之間共享數(shù)據(jù)內(nèi)容

    問題：

    數(shù)據(jù)安全性低
目前除Safari瀏覽器支持該事件，其他瀏覽器不支持

案例 — 實(shí)現(xiàn)記事本：    

     * 新增：清空textarea元素中的所有內(nèi)容
     * 保存：保存用戶輸入的內(nèi)容
     * 讀?。鹤x取保存的所有數(shù)據(jù)內(nèi)容
     * 顯示：顯示在表格中，第一列為單選框
     * 修改：指定指定數(shù)據(jù)內(nèi)容
     * 刪除：刪除指定數(shù)據(jù)內(nèi)容
     * 清空：將保存的所有數(shù)據(jù)刪除


<body>
  <textarea id="note" name="" rows="" cols=""></textarea>
<br/>           
  <button id="add">添加</button>
  <button id="save">保存</button>
  <button id="read">讀取</button>
  <button id="update">修改</button>
  <button id="dele">刪除</button>
  <button id="clear">清空</button>        
<br/>       
  <div id="showInfo">           
    <table id="infoTable" border="1" cellspacing="0">       
    </table>
    <input type="hidden" id="myHidden"/>
  </div>                
<script type="text/javascript">             
    var note=document.getElementById("note");
    var table=document.getElementById("infoTable");
    var now_id=document.getElementById("myHidden");
    window.onload=function(){
        //給按鈕綁定點(diǎn)擊事件
        document.getElementById("add").onclick=function()
        {note.value="";now_id.value="";};
        document.getElementById("save").onclick=_save;
        document.getElementById("read").onclick=_read;
        document.getElementById("update").onclick=_update;
        document.getElementById("dele").onclick=_dele;
        document.getElementById("clear").onclick=_clear;
    };
    function _save(){
        //判斷文本框里是否有值，也可去掉這個判斷
        if(note.value!="")
        {
        // 判斷隱藏的 input 里面是否有 value 值，為修改做準(zhǔn)備
        if(now_id.value!=""){
          //如果有，則將修改的值存入Session Storage中
            sessionStorage.setItem(now_id.value,note.value);
          //清空隱藏的 input 里的 value 值
            now_id.value="";
          //更新表格
            _read();
        }else{
            var key=new Date().getTime();
            sessionStorage.setItem(key,note.value);
        }
        note.value="";
        }
    };
    function _read(){
      // 創(chuàng)建thead、tbody
        table.innerHTML="<thead><tr><th></th><th>key</th><th>value</th></tr></thead>";
        table.innerHTML+="<tbody><tr></tr></tbody>";
     //循環(huán)Session Storage
        for(var i=0;i<sessionStorage.length;i++)
        {
        var key=sessionStorage.key(i);
        var value=sessionStorage.getItem(key);
        var row=table.insertRow();
        row.insertCell().innerHTML="<input type='radio' class="+"'key"+i+"'"+"/>";
        row.insertCell().innerHTML=key;
        row.insertCell().innerHTML=value;
        }
    };
    function _update(){
    //遍歷尋找被選中的那一行
        for(var i=0;i<sessionStorage.length;i++)
        {
        var input=document.querySelector("#infoTable .key"+i);
        if(input.checked){
            var key=sessionStorage.key(i);
            var value=sessionStorage.getItem(key);
            //將value在文本框內(nèi)顯示出來
            note.value=value;
            //將鍵key給到隱藏的 input 里的 value 值
            now_id.value=key;
        };
        };
    };
    function _dele(){
        for(var i=0;i<sessionStorage.length;i++)
        {
        var input=document.querySelector("#infoTable .key"+i);
        if(input.checked){
            var key=sessionStorage.key(i);
            sessionStorage.removeItem(key);
            _read();
        };
        };
    };
    function _clear(){
        sessionStorage.clear();
        table.innerHTML="";
    };
</script>

Web socket

  1. 網(wǎng)絡(luò)協(xié)議

    • 客戶端與服務(wù)端進(jìn)行通信的協(xié)議

    • HTTP協(xié)議 - 目前互聯(lián)網(wǎng)中最廣泛的協(xié)議

    • SOCKET協(xié)議 - 應(yīng)用于實(shí)時即時通信

  2. HTTP協(xié)議的問題

    • 無狀態(tài)

      本次客戶端的請求,服務(wù)器端不知道客戶端的上次請求

    • 短連接

      指通訊雙方有數(shù)據(jù)交互時，就建立一個連接，數(shù)據(jù)發(fā)送完成后，
則斷開此連接，即每次連接只完成一項(xiàng)業(yè)務(wù)的發(fā)送。

<strong> 問題：</strong>
短連接無法主動給客戶端發(fā)送信息

  1. Web Socket

    實(shí)現(xiàn)了用HTTP不容易實(shí)現(xiàn)的服務(wù)器端的數(shù)據(jù)推送等智能通訊技術(shù)

  2. Web Socket 的特點(diǎn)

    • 這個連接是實(shí)時的，也是永久的
    • 服務(wù)端可以主動推送消息
    • 服務(wù)端不需要輪詢客戶端的請求
    • 服務(wù)器端與客戶端之間通信無需重新建立連接

  3. 使用 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.html

    3）創(chuàng)建http_test.php文件,位置任意，能引用到Workerman文件中的Autoloader.php即可（建議同級目錄）

     <?php
 use Workerman\Worker;
 require_once '/Workerman/Autoloader.php';      

 // 創(chuàng)建一個Worker監(jiān)聽2346端口，使用websocket協(xié)議通訊
 $ws_worker = new Worker("websocket://0.0.0.0:2346");

 // 啟動4個進(jìn)程對外提供服務(wù)
 $ws_worker->count = 4;

 // 當(dāng)收到客戶端發(fā)來的數(shù)據(jù)后返回hello $data給客戶端
 $ws_worker->onMessage = function($connection, $data)
 {
 // 向客戶端發(fā)送hello $data
 $connection->send('hello ' . $data);
 };

 // 運(yùn)行worker
 Worker::runAll();
 ?>
    1. 運(yùn)行上面建的文件，啟動workerMan

    執(zhí)行workerMan

Web socket的使用

  1. 調(diào)用 WebSocket 對象的構(gòu)造器來建立與服務(wù)器之間的通信連接

    var webSocket = new WebSocket ("ws://127.0.0.1: 80/socket") ;

    請求地址不能再是 http:// 開頭,而是 Web Sockets的請求頭(ws:// 的開頭)

    ws:// - Web Socket的縮寫
wss:// - 表示加密協(xié)議
80 是默認(rèn)端口，如果 http_test.php文件中的端口是 2346 的話，這里也要改成 2346

  2. 使用 WebSocket 對象的 send() 方法對服務(wù)器發(fā)送數(shù)據(jù)

    webSocket.send (“data”);

 send() 方法只能發(fā)送文本數(shù)據(jù)，使用JSON對象把任何JavaScript,對象轉(zhuǎn)換稱文本數(shù)據(jù)后進(jìn)行發(fā)送。

  3. 通過WebSocket對象的close() 方法來關(guān)閉socket，切斷通信連接：

    webSocket.close( ) ;

  4. 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ù)器端連接出錯

    webSocket.onerror = function( event ){
    
}；

  5. 通過讀取 readyState 的屬性值來獲取 WebSocket 對象的狀態(tài)。

    • CONNECTING（數(shù)字值為0），表示正在連接；
    • OPEN（數(shù)字值為1），表示已建立連接；
    • CLOSING（數(shù)字值為2），表示正在關(guān)閉連接；
    • CLOSED（數(shù)字值為2），表示已關(guān)閉連接。

使用 WorkerMan,設(shè)置好 socket 客戶端后，可在頁面編寫一下代碼，查看

<body>      
  <button id="btn">發(fā)送</button>
  <button id="duan">斷開連接</button>
</body> 
<script type="text/javascript">
//與服務(wù)端建立長連接
  var webSocket=new WebSocket("ws://127.0.0.1:2346/socket");
//監(jiān)聽連接打開
  webSocket.onopen=function  () {
      alert("連接成功");
    //連接成功后，點(diǎn)擊button，發(fā)送數(shù)據(jù)
      document.getElementById("btn").onclick=function  () {
          webSocket.send("你在哪里");
      }
    //監(jiān)聽服務(wù)端發(fā)送的數(shù)據(jù)
      webSocket.onmessage=function  (event) {
          alert(event.data);
      }
  }
//斷開連接
  document.getElementById("duan").onclick=function  () {
      webSocket.close();
  }
//當(dāng)socket斷開連接以后執(zhí)行
  webSocket.onclose=function  () {
      alert("連接已斷開");
  }
//連接失敗時調(diào)用
  webSocket.onerror=function  () {
      alert("連接出錯");
  }
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 12.22學(xué)習(xí)經(jīng)驗(yàn)分享# Bruce_Zhu于2016.12.23 一、Web Worker Web Worker...
    旅行的意義zxy閱讀 914評論 1贊 1
  • web存儲API總覽 對于任何程序來說，能夠?qū)崿F(xiàn)數(shù)據(jù)存儲是必備功能之一，并且在需要的時候能夠提供數(shù)據(jù)。但在過去的W...
    Alone灬旅途閱讀 882評論 0贊 1
  • web存儲API 對于任何程序來說，能夠?qū)崿F(xiàn)數(shù)據(jù)存儲是必備功能之一，并且在需要的時候能夠提供數(shù)據(jù)。但在過去的Web...
    不住海邊也喜歡浪閱讀 507評論 0贊 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,837評論 18贊 139
  • 說到web數(shù)據(jù)存儲，我們可能會想到cookie，cookie畢竟存放的數(shù)據(jù)有限，在一個大數(shù)據(jù)時代，cookie已經(jīng)...
    lililifeng閱讀 902評論 0贊 0