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 组件更新历史 ...
随机推荐
- H5实现摇一摇技术总结
摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...
- Kali对wifi的破解记录
好记性不如烂笔头,记录一下. 我是在淘宝买的拓实N87,Kali可以识别,还行. 操作系统:Kali 开始吧. 查看一下网卡的接口.命令如下 airmon-ng 可以看出接口名称是wlan0mon. ...
- NoSql数据库使用半年后在设计上面的一些心得
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
- 前端学HTTP之字符集
前面的话 HTTP报文中可以承载以任何语言表示的内容,就像它能承载图像.影片或任何类型的媒体那样.对HTTP来说,实体主体只是二进制信息的容器而已.为了支持国际性内容,服务器需要告知客户端每个文档的字 ...
- vue.js初探
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
- Web安全相关(四):过多发布(Over Posting)
简介 过多发布的内容相对比较简单,因此,我只打算把原文中的一些关键信息翻译一下.原文链接如下: http://www.asp.net/mvc/overview/getting-started/gett ...
- 用Kotlin创建第一个Android项目(KAD 01)
原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...
- java根据html生成摘要
转自:http://java.freesion.com/article/48772295755/ 开发一个系统,需要用到这个,根据html生成你指定多少位的摘要 package com.chendao ...
- 《高性能javascript》一书要点和延伸(下)
第六章 快速响应的用户界面 本章开篇介绍了浏览器UI线程的概念,我也突然想到一个小例子,这是写css3动画的朋友都经常会碰到的一个问题: <head> <meta charset=& ...