H5API 之 Web存储与WebSocket

目录

一、Web存储

1、Cookie

2、WebStorage

2.1 SessionStorage(会话存储)

2.2 LocationStorage

二、WebSocket 

---

一、Web存储

Web存储分为两类：Cookie和WebStorage(SessionStorage、LocalStorage)

而WebStorage又分为SessionStorage和LocalStorage。

1、Cookie

特点：cookie存储产生于服务器端，保存于客户端；是面向服务器的，而同一服务器的Cookies是共享的，不同则反之；大小限制为4kb。

每次浏览器向服务器请求都需要携带cookie。

我们可以通过js来产生cookie，通过js-cookie库来操作cookie。

使用cookie步骤：

   // 设置Cookies  参数：key value 过期时间expires
        Cookies.set("gender","male",{expires:7})
   // 获取Cookies get参数：键名/属性名
        console.log(Cookies.get('gender')); 
   // 移除cookies remove参数：属性名
        Cookies.remove('status')

2、WebStorage

2.1 SessionStorage(会话存储)

特点：针对于选项卡； 选项卡关闭或者浏览器关闭，会话失效 ；传输数据可以达到5M。

 四个方法：

setItem(key,value)

getItem(key)

clear();参数:无 清除所有得会话存储

removeItem(key) 清除key对应得会话存储

// 设置会话存储
		sessionStorage.setItem('gender','male');
// 获取会话存储
		sessionStorage.getItem('gender');
// 清除/移除会话存储 参数:键名
	    sessionStorage.removeItem('gender');
// 清除全部得会话存储
		sessionStorage.clear();

2.2 LocationStorage

特点：将数据存储到本地磁盘，即使选项卡和浏览器关闭数据依旧存在 ，除非手动删除 否则数据一直存在本地磁盘中。传输得数据5M甚至更大。

方法：setItem(key,value)  getItem(key)  removeItem(key)  clear()；

        // 设置本地存储
		localStorage.setItem('age','12');
		// 获取本地存储
		console.log(localStorage.getItem('age'));
		// 移除本地存储
		localStorage.removeItem('age');
		// 全部移除
		localStorage.clear();

前端存储：

    1.分为cookie和WebStorage,WebStorage分为sessionStorage和localStorage；
     2.cookie特点产生于服务器端,保存在客户端，同一服务器下得cookie共享的,传输数据最大为4kb；
     3.sessionStorage会话存储 针对于选项卡 选项卡关闭或者浏览器关闭 会话失效 传输数据可以达到5M；
     4.localStorage本地存储,将数据存到本地磁盘中 即使选项卡关闭或者浏览器关闭 数据依旧存在 传输数据可以达到5M；
     5.方法 cookie sessionStorage localStorage；

二、WebSocket 

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

它让客户端和服务器之间的数据交换变得更加简单，它允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的快速通道，并进行双向数据传输。

 if (!window.WebSocket) {
        console.log("此浏览器不支持WebScocket");
    } else {       
        // 1.创建一个webscoket对象
        var scoket = new WebSocket('ws://121.199.0.35:8888/imserver/25');
        // 2.接收服务器的消息推送
        scoket.onmessage=function(event){
            console.log(event.data);
        }
        // 3.监听Webscoket和服务器连接成功的监听事件
        scoket.onopen=function(){
            console.log('Webscoket和服务器连接成功');
            scoket.send('发送给服务器的数据')
        }
        // 4.Webscoket和服务器连接关闭的监听
        scoket.close=function(){
        console.log('Webscoket和服务器连接关闭');
        }
          // 手动关闭Webscoket连接
          setTimeout(function () {
            scoket.close()
        },3000)
    }