H5新特性--WebStorage--WebSocke

今天的目标

3.2:h5新特性--WebStorage

localStorage  在客户端浏览器保存数据

永久保存

保存数据 localStorage [key] = value

保存数据 localStorage.setItem(key,value);

获取数据 var value = localStorage [key];

获取数据 var value = localStorage.getItem(key);

删除数据 localStorage.removeItem(key);

删除数据 localStorage.clear();

数据个数 localStorage.length

获取key  var key = localStorage.key(i);

3.1:h5新特性--WebSocket--代码不复杂重点原理

HTTP协议:属于"请求-响应"模型,只有客户端发起请求，服务器才会响应消息，没有请求就没有响应，一个请求，只能得到一个响应。有些场景中HTTP工作模型"不适合"

"股票走势图" 解决方案--长轮询/心跳请求

WebSocket协议:"广播-收听",客户端连接到服务器就不再断开,永久连接，双方随时向对方发送数据，ws在实时数据特别有优势.

ws 协议的应用程序可分为两个部分(服务器/客户端)

服务器:

监听指定端口.接收客户端请求，对向方发消息，并接收消息.可以php/java/node.js 创建服务器

客户端

主动发起请求，保持永久连接，向对方发消息，并接收消息，可以php/java/html5

掌握:使用html5创建ws协议客户端

1:连接ws服务器

var socket = new WebSocket("ws://127.0.0.1:9001");

2:向服务器发送消息

socket.send(stringMsg);

3:接收服务器消息

socket.onmessage = function(e){e.data}

4:断开ws服务器连接

socket.close();

练习一:主题选项

创建index.html，有一个下拉菜单 "请选择您喜欢主题"

"蔚兰天空","芭比公主","暗黑主题",各对应一个class名

.blue{background:#ddf;color:#33a}

.pink{ background:#fdf;color:#a3a }

.drak{ background:#333;color:#eee}

用户选中某个项目(select.onchange)为当前页面(body),

使用指定样式.

创建usercenter.html打开此页面即可应用index.html中一样样式,即使重启浏览器中，直接usercenter.html 仍是之前

曾经选中的主题.