Web存储API
-
对于任何程序来说，能够实现数据存储是必备功能之一，并且在需要的时候能够提供数据。但在过去的Web客户端，没有能够支持数据存储的有效机制，cookie曾用来在客户端存储少量信息，但受其性质所限，cookie只能存储一些短的字符串
-
在HTML5中提供了Web存储API，它是在cookie之上的增强。这个API允许我们在用户的硬盘上存储数据，并在日后使用这些数据。
-
API可以分成两个部分：
1）信息必须且只在会话过程中使用 — sessionStorage
当浏览器窗口关闭时，数据全部丢失2）信息必须长期保存且由用户决定时长 — localStorage
关闭浏览器窗口时，数据继续使用
数据只能由用户删除
<i>打开浏览器，按 F12就会出现，下面的窗口，点击 Resources 就可以查看到你的浏览器上存储的 sessionStorage 、 localStorage 信息</i>
Paste_Image.png
sessionStorage
-
sessionStorage这部分API就像是会话cookie的替代。
-
cookie以及sessionStorage都是在特定的时间段内保持数据可用。但cookie使用浏览器作为引用，而sessionStorage使用单个窗口作为引用，这就意味着，窗口关闭之后，sessionStorage就不能再使用。
-
使用方法
-
设置数据
sessionStorage.setItem(key,value) key - 作为存储数据的唯一标识 value - 存储的数据内容(number/string)-
根据标识获取数据
var value = getItem(key); -
删除指定标识的数据
sessionStorage.removeItem(key); 采用循环的方式来移除，for + if 实现 -
将存储系统的所有数据删除
sessionStorage.clear() -
根据索引值返回key
var key = sessionStorage.key(index); -
length属性
返回当前存储系统的数据个数 sessionStorage.length
-
localStorage
-
提供的属性和方法与sessionstorage一致
-
storage事件
实现多个窗口之间共享数据内容问题：
数据安全性低 目前除Safari浏览器支持该事件，其他浏览器不支持
案例 — 实现记事本：
* 新增：清空textarea元素中的所有内容
* 保存：保存用户输入的内容
* 读取：读取保存的所有数据内容
* 显示：显示在表格中，第一列为单选框
* 修改：指定指定数据内容
* 删除：删除指定数据内容
* 清空：将保存的所有数据删除
<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(){
//给按钮绑定点击事件
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 值，为修改做准备
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(){
// 创建thead、tbody
table.innerHTML="<thead><tr><th></th><th>key</th><th>value</th></tr></thead>";
table.innerHTML+="<tbody><tr></tr></tbody>";
//循环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在文本框内显示出来
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
-
网络协议
-
客户端与服务端进行通信的协议
-
HTTP协议 - 目前互联网中最广泛的协议
-
SOCKET协议 - 应用于实时即时通信
-
-
HTTP协议的问题
-
无状态
本次客户端的请求,服务器端不知道客户端的上次请求 -
短连接
指通讯双方有数据交互时，就建立一个连接，数据发送完成后， 则断开此连接，即每次连接只完成一项业务的发送。
-
<strong> 问题：</strong>
短连接无法主动给客户端发送信息
-
Web Socket
实现了用HTTP不容易实现的服务器端的数据推送等智能通讯技术
-
Web Socket 的特点
- 这个连接是实时的，也是永久的
- 服务端可以主动推送消息
- 服务端不需要轮询客户端的请求
- 服务器端与客户端之间通信无需重新建立连接
-
使用 WorkerMan,设置 socket 客户端
1）设置php环境变量
2）下载并解压workerMan
http://www.workerman.net/workerman workerMan学习文档 http://doc3.workerman.net/getting-started/simple-example.html3）创建http_test.php文件,位置任意，能引用到Workerman文件中的Autoloader.php即可（建议同级目录）
<?php use Workerman\Worker; require_once '/Workerman/Autoloader.php'; // 创建一个Worker监听2346端口，使用websocket协议通讯 $ws_worker = new Worker("websocket://0.0.0.0:2346"); // 启动4个进程对外提供服务 $ws_worker->count = 4; // 当收到客户端发来的数据后返回hello $data给客户端 $ws_worker->onMessage = function($connection, $data) { // 向客户端发送hello $data $connection->send('hello ' . $data); }; // 运行worker Worker::runAll(); ?>- 运行上面建的文件，启动workerMan
执行workerMan
Web socket的使用
-
调用 WebSocket 对象的构造器来建立与服务器之间的通信连接
var webSocket = new WebSocket ("ws://127.0.0.1: 80/socket") ;请求地址不能再是 http:// 开头,而是 Web Sockets的请求头(ws:// 的开头)
ws:// - Web Socket的缩写 wss:// - 表示加密协议 80 是默认端口，如果 http_test.php文件中的端口是 2346 的话，这里也要改成 2346 -
使用 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 ){ }； -
通过读取 readyState 的属性值来获取 WebSocket 对象的状态。
- CONNECTING（数字值为0），表示正在连接；
- OPEN（数字值为1），表示已建立连接；
- CLOSING（数字值为2），表示正在关闭连接；
- CLOSED（数字值为2），表示已关闭连接。
使用 WorkerMan,设置好 socket 客户端后，可在页面编写一下代码，查看
<body>
<button id="btn">发送</button>
<button id="duan">断开连接</button>
</body>
<script type="text/javascript">
//与服务端建立长连接
var webSocket=new WebSocket("ws://127.0.0.1:2346/socket");
//监听连接打开
webSocket.onopen=function () {
alert("连接成功");
//连接成功后，点击button，发送数据
document.getElementById("btn").onclick=function () {
webSocket.send("你在哪里");
}
//监听服务端发送的数据
webSocket.onmessage=function (event) {
alert(event.data);
}
}
//断开连接
document.getElementById("duan").onclick=function () {
webSocket.close();
}
//当socket断开连接以后执行
webSocket.onclose=function () {
alert("连接已断开");
}
//连接失败时调用
webSocket.onerror=function () {
alert("连接出错");
}
</script>
网友评论