码迷,mamicode.com
首页 > 其他好文 > 详细

H5新特性---新应用

时间:2018-05-19 10:37:20      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:浏览器   加载   推送   保存数据   持久化   之间   sock   页面   cti   

1、持久化本地存储

  可以不通过第三方插件实现数据的本地存储

 

2、WebSocket

  页面之间可以双向通信

 

3、服务器推送事件(SSE)

  从Web服务器将消息推送给浏览器(在手机中常见)

 

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LocalStorage</title>
</head>
<body>
<h2 id="hun"> </h2>
<input type="text" name="username" id="username">
<button type="button" onclick="savename()">SaveUserName</button> //保存数据
<button type="button" onclick="loadname()">LoadName</button> //加载之前保存的数据并通过H2展示
<script>
    function savename() { //定义函数
        var un = document.getElementById("username").value; //利用document得到username的值
        console.log(un); //在浏览器的console 中可以查看到传过来的数据
        localStorage.username = un; //利用localStorage对象保存 如果再次点击,不会再次添加,
    }
    function loadname() { //定义函数
        var  h2un = document.getElementById("hun"); //首先获取h2的大标签
        h2un.innerHTML = localStorage.username;  //因为要h2标签添加内容所以使用.innerHTML,将之前存储在localStorage中的值提取出来赋值给H2的标签
    }
</script>
</body>
</html>

 

H5新特性---新应用

标签:浏览器   加载   推送   保存数据   持久化   之间   sock   页面   cti   

原文地址:https://www.cnblogs.com/white-the-Alan/p/9059261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!