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 仍是之前

曾经选中的主题.

 

来源：oschina

链接：https://my.oschina.net/u/4332051/blog/3959864