说到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 = "<tr><td></td><td>key</td><td>value</td></tr>";
var length = sessionStorage.length;
for (var i =0;i<length;i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
//每次遍历到一个数据，
var row = table.insertRow();
row.insertCell().innerHTML = "<input id='"+i+"' type='radio' name='myRadio'>"
row.insertCell().innerHTML = key;
row.insertCell().innerText = value;
}
}
//修改
update.onclick = function(){
var length = sessionStorage.length;
for (var i= 0;i<length;i++) {
//通过i对应的input的id 找单选框
var input = document.getElementById(i);
//判断当前单选框是否被选中
if (input.checked) {
//到该单选框的key和value
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
//将要修改的内容放入输入框
textarea.value = value;
//将key保存到input中
document.getElementById("myHidden").value = key;
}
}
read.onclick();
}
//删除
dele.onclick=function () {
var length=sessionStorage.length;
//遍历sessionStorage
for(var i=0;i<length;i++){
var input = document.getElementById(i);
//判断当前input是否被选中
if(input.checked){
//删除被选中的信息
var key = sessionStorage.key(i);
sessionStorage.removeItem(key);
}
}
read.onclick();
}
//清空
clear.onclick=function () {
//使用sessionStorage清空数据
sessionStorage.clear();
read.onclick();
}
效果图
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,对象转换称文本数据后进行发送。
-
通过WebSocket对象的close() 方法来关闭socket，切断通信连接：
webSocket.close( ) ;
-
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 ){ }- 通过读取 readyState 的属性值来获取 WebSocket 对象的状态：
CONNECTING（数字值为0），表示正在连接。
OPEN（数字值为1），表示已建立连接。
CLOSING（数字值为2），表示正在关闭连接。
CLOSED（数字值为2），表示已关闭连接。
配置本地Web Socket服务器后，在本地创建Web Socket客户端通信：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<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>
</html>
网友评论