HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
//暂时数据
function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
sessionStorage.setItem("message",str); } function loadStorage(id){
var target=document.getElementById(id);
var msg=sessionStorage.getItem("message");
target.innerHTML=msg; } //永久数据
function saveStorage(id){
var target=document.getElementById(id);
var str=target.value;
localStorage.setItem("message",str); } function loadStorage(id){
var target=document.getElementById(id);
var msg=localStorage.getItem("message");
target.innerHTML=msg; } function clearStorage(){
localStorage.clear();
}
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')">
<input type="button" value="清除本地数据" onclick="clearStorage('msg')">

function save(){
var data=new Object;
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("数据已保存");
} function read(){
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;
}
姓名:<input type="text" id="name"/><br/>
手机:<input type="text" id="tel"/><br/>
地址:<input type="text" id="address"/><br/>
<input type="button" value="保存数据" onclick="save()"/><br/><br/> 姓名:<input type="text" id="readName"/><br/>
手机:<p id="readTel"></p>
地址:<p id="readAddress"></p>
<input type="button" value="读取数据" onclick="read()"/>



7u.png)
var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);



aqay.png)


%7Dx%24gmnn9~@osyx(s%5Br.png)




___d%5By%60j2hj~u9p.png)


)97t6c6_n)ur%24_d.png)

applicationCache.onUpdateReady=function(){
alert("本地缓存已被更新!");
}
applicationCache.onUpdateReady=function(){
alert("正在更新本地缓存!");
applicationCache.swapCache();
alert("本地缓存已被更新!");
}
如果不加applicationCache.swapCache();会怎么样?

f%5Br~savfmb(x1fws@(j106.png)




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);
} function cal(){
var num=parseInt(document.getElementById("num").value,10);
//将数值传递给线程
worker.postMessage(num);
}
输入数值:<input type="text" id="num"/>
<button onclick="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权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...
- JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
- JavaScript权威设计--JavaScript词法结构(简要学习笔记二)
1.字符集 JavaScript是用Unicode字符集编写的 2.区分大小写 html不区分大小写,xhtml区分大小写 如:html中onclick可以写成Onclick 但是js中必须写成onc ...
- (6)《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
- HTML5权威指南 中文版 高清PDF扫描版
HTML5权威指南是一本系统学习网页设计的权威参考图书.<HTML5权威指南>分为五部分:第一部分介绍学习本书的预备知识和HTML.CSS和JavaScript的最新进展:第二部分讨论HT ...
- 《HTML5权威指南》
<HTML5权威指南> HTML元素: html字符实体 html全局属性 html base标签 用元数据元素说明文档 标记文字(第八章) 标记文字.组织内容.文档分节 表格元素 表单元 ...
- html5权威指南:标记文字
html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...
- 【01】《html5权威指南》(扫描版)(全)
[01]<html5权威指南>(扫描版)(全) []魔芋:无高清电子书. 只看第五部分,高级功能. 作者:(美)弗里曼 著,谢延晟,牛化成,刘美英 译 [美]adam freeman ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
随机推荐
- Windows平台分布式架构实践 - 负载均衡
概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Linux和Mac上运行.那么大家(开发者和企业)为 ...
- iOS系列文章
本博客全为原创,如果借鉴了其他文章会在博文的下面进行说明.欢迎转载,但要在文章中给出原文链接,谢谢. 有链接的说明已经发布,没有链接的说明还没有发布. 并不是所有的博文都在这里罗列,有兴趣的可以看博客 ...
- git亲测命令
一.Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream bra ...
- Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips (转)
忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...
- java中易错点(一)
由于replaceAll方法的第一个参数是一个正则表达式,而"."在正则表达式中表示任何字符,所以会把前面字符串的所有字符都替换成"/".如果想替换的只是&qu ...
- 如何用Java类配置Spring MVC(不通过web.xml和XML方式)
DispatcherServlet是Spring MVC的核心,按照传统方式, 需要把它配置到web.xml中. 我个人比较不喜欢XML配置方式, XML看起来太累, 冗长繁琐. 还好借助于Servl ...
- 【JS基础】正则表达式
正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z ...
- 基于Vue2.0的单页面开发方案
2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...
- iOS从零开始学习直播之2.采集
直播的采集由采集的设备(摄像头.话筒)不同分为视频采集和音频采集,本篇文章会分别介绍. 1.采集步骤 1.创建捕捉会话(AVCaptureSession),iOS调用相机和话筒之前都需要创建捕 ...
- ORACLE中STATUS为INACTIVE但是SERVER为SHARED状态的会话浅析
我们知道当ORACLE数据库启用共享服务器模式时,通过共享服务器模式连接到数据库的会话是有一些特征的.在v$session里面,其SERVER的状态一般为SHARED和NONE, 为SHARED时,表 ...