HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
//暂时数据
functionsaveStorage(id){var target=document.getElementById(id);var str=target.value;sessionStorage.setItem("message",str);}functionloadStorage(id){var target=document.getElementById(id);var msg=sessionStorage.getItem("message");target.innerHTML=msg;}//永久数据
functionsaveStorage(id){var target=document.getElementById(id);var str=target.value;localStorage.setItem("message",str);}functionloadStorage(id){var target=document.getElementById(id);var msg=localStorage.getItem("message");target.innerHTML=msg;}functionclearStorage(){localStorage.clear();
}
<pid="msg"></p>
<inputtype="text"id="input">
<inputtype="button"value="保存数据"onclick="saveStorage('input')">
<inputtype="button"value="读取数据"onclick="loadStorage('msg')">
<inputtype="button"value="清除本地数据"onclick="clearStorage('msg')">
functionsave(){var data=newObject;data.name=document.getElementById('name').value;data.tel=document.getElementById('tel').value;data.address=document.getElementById('address').value;var str=JSON.stringify(data);localStorage.setItem(data.name,str);alert("数据已保存");
}functionread(){var find=document.getElementById('readName').value;var JsonData=JSON.parse(localStorage.getItem(find));console.log(JsonData.tel);document.getElementById('readTel').innerHTML=JsonData.tel;document.getElementById('readAddress').innerHTML=JsonData.address;
}
姓名:<inputtype="text"id="name"/><br/>手机:<inputtype="text"id="tel"/><br/>地址:<inputtype="text"id="address"/><br/>
<inputtype="button"value="保存数据"onclick="save()"/><br/><br/>姓名:<inputtype="text"id="readName"/><br/>手机:<pid="readTel"></p>地址:<pid="readAddress"></p>
<inputtype="button"value="读取数据"onclick="read()"/>
var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);
applicationCache.onUpdateReady=function(){alert("本地缓存已被更新!");
}
applicationCache.onUpdateReady=function(){alert("正在更新本地缓存!");applicationCache.swapCache();alert("本地缓存已被更新!");
}
如果不加applicationCache.swapCache();会怎么样?
window.addEventListener("message",function(){.....},false);
otherWindow.postMessage(message,targetOrigin);
otherWindow为要发送窗口对象的引用。
//发送消息
iframe.postMessage("您好","目标地址");
//接受消息
window.addEventListener("meeage",function(ev){alert("从"+ev.origin+"那里传过来的信息:\n\""+ev.data+"\"");
},false);
var webSocket=new WebSocket("ws://localhost:8005/socket");(客户端写法)//onmessage事件接受服务器传来的数据:
webSocket.onmessage=function(event){var data=event.data;
}//onopen事件监听socket的打开事件:
webSocket.onopen=function(event){}//onclose事件监听socket的打开事件:
webSocket.onclose=function(event){}webSocket.close();
closing(数字2),表示正在关闭连接。
worker.onmessage=function(event){//处理接收到的消息
}
var worker=new Worker("Sum.js");
worker.onmessage=function(event){alert("sum="+event.data);
}functioncal(){var num=parseInt(document.getElementById("num").value,10);//将数值传递给线程
worker.postMessage(num);
}
输入数值:<inputtype="text"id="num"/>
<buttononclick="cal()">计算</button>
onmessage=function(event){var num=event.data;var result=0;for(var i=0;i<=num,i++){result+=i;}postMessage(result);
}
void getCurrentPosition(onSuccess,onError,options);
navigator.geolocation.getCurrentPosition(function(position){//成功时的处理
})
HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...相关推荐
- JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)...
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
- JavaScript权威设计--JavaScript词法结构(简要学习笔记二)
1.字符集 JavaScript是用Unicode字符集编写的 2.区分大小写 html不区分大小写,xhtml区分大小写 如:html中onclick可以写成Onclick 但是js中必须写成onc ...
- HTML5权威指南----读书笔记
<!DOCTYPE html> <html> <head><meta name = 'keywords' content="HTML5权威指南--- ...
- HTML5 权威指南第 10 章 文档分节 学习笔记
HTML5 权威指南第 10 章 文档分节 学习笔记 第 8 章 标记文字 内容从从文字出发,专注如何将单体内容正确的呈现出来:第 9 章 组织内容 内容从段落出发,专注如何将单体内容合理的放在段落中 ...
- 数据库LINQ TO SQL在Silverlight中的应用(WCF)------学习笔记(一)
数据库LINQ TO SQL在Silverlight中的应用(WCF)------学习笔记(一) 步骤: 1. 创建SILVERLIGHT应用程序 2. 创建LINQ TO SQL [注意序列化的问题 ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- golang实现将数据库表自动转为结构体的小工具(学习笔记)
golang实现将数据库表自动转为结构体的小工具 必备条件 代码结构如下 代码详情 config.go init.go tool.go main.go config.json[运行man.go文件的时 ...
- 《JavaScript权威指南第7版》第15章 Web浏览器中的JavaScript 15.1 15.2 15.3
第15章 Web浏览器中的JavaScript 15.1 网络编程基础 15.1.1 HTML script 标签中的JavaScript 模块 指定脚本类型 脚本运行时:异步和延迟 按需加载脚本 1 ...
- Springboot学习笔记(二)Web开发
前言: 学习B站UP主狂神说视频笔记整理视频链接 狂神笔记链接 上篇笔记链接-Springboot学习笔记(一)快速上手 Web开发 静态资源 在以往的SpringMVC中所有静态资源或者页面应该放在 ...
最新文章
- python的前端怎么实现_Bootstrap、Python、Flask 做简单的前端
- phpredis5.6在win10下的安装
- python五十九: slots属性
- hdu 1005 1021 递归超限 找规律 // 只要看题中n较大都是有规律的
- [译] Facebook杯2013年编程挑战赛——第一轮题目及答案
- Java实现算法导论中最大公约数欧几里得算法
- 今日头条Marketing API小工具(.Net Core版本)
- java this用法_java中this用法小结
- linux 认证考试 题库,Linux认证考试题库及答案
- 做大厂程序员是一种怎样的体验?这四位“百度程序员”说出了自己的看法!
- 手写体识别代码_机器人如何在复杂的环境下进行视觉识别?
- VS中PCL库附加依赖项配置
- 关于maven依赖中的scope的作用和用法
- php笔试完就让我回去了,昨晚hr给了我一个面试题,说过了就安排我面试
- 记一次 ORA-600 [12700] 故障案例
- rs232读取智能电表_深度了解智能电度表,面板内容大揭秘!
- FlashVml2.0(WEB上的PhotoShop+Flash、VML最强开发工具)
- 机器学习决策树ID3
- 攻防世界web新手题答案_南开本部20春学期(2003)《计算机应用基础》在线作业-1答案...
- html(Web开发)
热门文章
- 如何制作在线参考手册
- excel去掉超链接
- Linux MySQl 5.7.17 MySQL ERROR 1366(HY000):Incorrect string value 解决方法
- Windows恶意软件API调用特征分析
- 切记切记:Spring配置文件中,Component-scan无法扫描到的类中的自动装配对象无法被调用,报空指针错误。...
- 暴力枚举 UVA 725 Division
- openldap 2.3 安装配置详解
- 捅破窗户纸:如何从过程到对象—For金色的海洋以及所有为面向对象而困惑的Tx...
- BCH三小时缓慢出块——需要重视的小概率事件
- java 关键字final static