web存储API和socket协议

web存储API

• 对于任何程序来说，能够实现数据存储是必备功能之一，并且在需要的时候能够提供数据。但在过去的Web客户端，没有能够支持数据存储的有效机制，cookie曾用来在客户端存储少量信息，但受其性质所限，cookie只能存储一些短的字符串。

• 在HTML5中提供了Web存储API，它是在cookie之上的增强。这个API允许我们在用户的硬盘上存储数据，并在日后使用这些数据。

• API可以分成两个部分：

  1. 信息必须且只在会话过程中使用—sessionStorage
  
     当浏览器窗口关闭时，数据全部丢失
  
  2. 信息必须长期保存且由用户决定时长—localStorage
  
     关闭浏览器窗口时，数据继续使用
     数据只能由用户删除
  

  • sessionStorage这部分API就像是会话cookie的替代。
    1. 设置数据

     sessionStorage.setItem(key,value);
    
     sessionStorage是全局变量window的一个属性
     key - 作为存储数据的唯一标识，key一定要唯一
     value - 存储的数据内容(number/string)
    
    2. 根据标识获取数据
    
     var value = sessionStorage.getItem(key);
    
    3. 删除指定标识的数据
    
      sessionStorage.removeItem(key);
    
    4. 将存储系统的所有数据删除
    
      sessionStorage.clear();
    

  • localStorage提供的属性和方法与sessionstorage一致

socket协议

• HTTP和SOCKET的优缺点
  HTTP协议 - 目前互联网中最广泛的协议
  SOCKET协议 - 应用于实时即时通信

  • HTTP协议的问题

    无状态
    
    本次客户端的请求,服务器端不知道客户端的上次请求
    
    短连接
    
    指通讯双方有数据交互时，就建立一个连接，数据发送完成后，则断开此连接，即每次连接只完成一项业务的发送。
    

  • web Socket的特点

    实现了用HTTP不容易实现的服务器端的数据推送等智能通讯技术
    
    1. 这个连接是实时的，也是永久的
    2. 服务端可以主动推送消息
    3. 服务端不需要轮询客户端的请求
    4. 服务器端与客户端之间通信无需重新建立连接
    

• Web socket的使用

  • 调用 WebSocket 对象的构造器来建立与服务器之间的通信连接

    var webSocket = new WebSocket (“ws://127.0.0.1: 8005/socket”) ;
    
    请求地址(url)不能再是http://开头,Web Sockets的请求头(url的开头)
    
    ws:// - Web Socket的缩写
    wss:// - 表示加密协议
    

  • 使用 WebSocket 对象的 send() 方法对服务器发送数据

    webSocket.send (“data”);
    
    send() 方法只能发送文本数据。,使用JSON对象把任何JavaScript,对象转换称文本数据后进行发送。 
    

  • 通过WebSocket对象的close() 方法来关闭socket，切断通信连接：

    webSocket.close( ) ;
    

  • Web Socket事件

    1）通过获取 onmessage事件来接收服务器传来的数据：
    
     webSocket.onmessage = function( event ){
    
         var data = event.data ;
     }
    
    2）通过获取 onopen 事件来监听 socket 的打开事件：
    
     webSocket.onopen = function( event ){
     
     }
    
    3）通过获取onclose事件来监听socket 的关闭事件：
    
     webSocket.onclose = function( event ){
         
     }
    
    4）通过onerror事件，监听客户端与服务器端连接出错
    
     webSocket.onerror = function( event ){
         
     }
    

• 下面是一个里实例
  //建立长连接
  var webSocket = new WebSocket("ws://127.0.0.1:2346/socket");

  //监听链接打开
  webSocket.onopen = function  () {
    alert("链接成功");
    
    document.getElementById("btn").onclick = function () {
        webSocket.send("吃了吗");
    }
  }
  
  //监听服务器发送的数据
  webSocket.onmessage = function () {
    alert(even.data);
  }
  
  //断开链接
  document.getElementById("close").onclick = function () {
    webSocket.close();
  }
  
  //当socket断开链接以后执行
  webSocket.onclose = function () {
    alert("链接已断开");
  }