Web存储API、Web Socket

---

说到web数据存储，我们可能会想到cookie，cookie毕竟存放的数据有限，在一个大数据时代，cookie已经不能满足需求了，那我们还能怎么在本地存储数据呢？

Web存储API

Web存储API分为两种：sessionStorage对象，localStorage对象
sessionStorage对象：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
localStorage对象：对象存储的数据信息长期保存，没有时间限制，由用户自己删除。localStorage使用方法和sessionStorage一致；

sessionStorage属性：length，通过它可以知道sessionStorage存储数据有多少
sessionStorage使用方法：

1）设置数据
       setItem(key,value)
       key - 作为存储数据的唯一标识
       value - 存储的数据内容(number/string)

    2) 根据标识获取数据
        var value = getItem(key);
       
    3) 删除指定标识的数据
        removeItem(key);

    4）将存储系统的所有数据删除
        clear()

    5）根据索引值返回key
        var key = key(index);

sessionStorage使用实例：

记事本

需求如下：
新增：清空textarea元素中的所有内容
保存：保存用户输入的内容
读取：读取保存的所有数据内容
显示在表格中，第一列为单选框
修改：指定指定数据内容
必须选择一条数据
删除：删除指定数据内容
必须选择其中一条数据
清空：将保存的所有数据删除

代码实现

 //新增
  add.onclick =function(){
                textarea.value="";
            }

//保存
  save.onclick =function(){
        var key = document.getElementById("myHidden").value;
        if (key) {//当前是修改，key不变，value
                sessionStorage.setItem(key,textarea.value);
        } else{//当前是新增，重新生成一个key
                key =new Date().getTime();
                sessionStorage.setItem(key,textarea.value);
            }
        //每次保存后要把隐藏域 给清空
        document.getElementById("myHidden").value = ""; 
        read.onclick();
    }


//读取
read.onclick= function(){
    //获取到表
    var table =document.getElementById("infoTable");
    //设置表头
    table.innerHTML = "keyvalue";
    var length = sessionStorage.length;
    for (var i =0;i"
            row.insertCell().innerHTML = key;
            row.insertCell().innerText = value;
        }
    }
            

//修改
update.onclick = function(){
    var length = sessionStorage.length;
    for (var i= 0;i

效果图

---

Web Socket

HTTP和Web socket都是通信协议，HTTP使用的是短连接，指通讯双方有数据交互时，就建立一个连接，数据发送完成后，则断开此连接，即每次连接只完成一项业务的发送。如果建立的是短连接，服务器无法主动给客户端发送信息。这样HTTP就无法进行即时通信。
Web Socket能解决这个问题，它具有以下几个特点：
1）这个连接是实时的，也是永久的
2）服务端可以主动推送消息
3）服务端不需要轮询客户端的请求
4）服务器端与客户端之间通信无需重新建立连接

Web Socket的使用：
1)调用 WebSocket 对象的构造器来建立与服务器之间的通信连接

 var webSocket = new WebSocket (“ws://127.0.0.1:2346/socket”) ;

      请求地址(url)不能再是http://开头,Web Sockets的请求头(url的开头)
          
         ws:// - Web Socket的缩写
         wss:// - 表示加密协议

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

   webSocket.send (“data”);

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

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

   webSocket.close( ) ;

4. Web Socket事件

   4.1）通过获取 onmessage事件来接收服务器传来的数据：

      webSocket.onmessage = function( event ){
   
          var data = event.data ;
      }
   

   4.2）通过获取 onopen 事件来监听 socket 的打开事件：

      webSocket.onopen = function( event ){
      
      }
   

   4.3）通过获取onclose事件来监听socket 的关闭事件：

      webSocket.onclose = function( event ){
          
      }
   

   4.4）通过onerror事件，监听客户端与服务器端连接出错

      webSocket.onerror = function( event ){
          
      }
   

   5. 通过读取 readyState 的属性值来获取 WebSocket 对象的状态：

      CONNECTING（数字值为0），表示正在连接。
      OPEN（数字值为1），表示已建立连接。
      CLOSING（数字值为2），表示正在关闭连接。
      CLOSED（数字值为2），表示已关闭连接。

配置本地Web Socket服务器后，在本地创建Web Socket客户端通信：

    
        
        
    
    
        
        发送
        断开连接