1.Web Storage
HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能。
以前都是用cookies保存用户名等简单信息。
 
但是cookie有下面几个问题:
a:大小:cookies的大小被限制在4KB
b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽。
c:复杂性:要正确的操纵cookies是很困难的。
 
Web Storage分为两种:
<1>sessionStorage
    将数据保存在session对象中。浏览器关闭数据消失。
    保存数据:sessionStorage.setItem(key,value);
    读取数据:变量=sessionStorage.getItem(key);
<2>localStorage
    将数据保存在哭护短本地的硬件设备中。浏览器关闭数据依旧存在。(分浏览器的,如果保存在
    在谷歌浏览器,下次打开IE是不会有的)
    保存数据:localStorage.setItem(key,value);

    读取数据:变量=localStorage.getItem(key);
 
保存时不允许重负保存相同的键名。保存后可以修改键值,但不允许修改键名。
 
<3>保存少量数据
js:
//暂时数据
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();
}
 
html:
<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')">
结果:
 
<4>作为简易的数据库来用
使用json作为键值。
js:
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;
}
 
html:
姓名:<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()"/> 
结果:
 
 
2.本地数据库
 
 
<1>两个必要步骤
   a: 创建访问数据库的对象
   b: 使用事务处理
首先必须用openDatabase方法创建一个访问数据库的对象:
var db=openDatabase('mydb','1.0','Test DB',2*1024*1024);
第一个参数:数据库名
第二个参数:版本号
第三个参数:数据库的描述
第四个参数:数据库的大小
如果该数据不存在,则创建它。
 
 
<2>executeSql
第一个参数:需要执行的sql语句
第二个参数:sql语句中使用到的参数数组
               如:  
第三个参数:执行sql语句成功时候的回调函数
               如:
     该函数的第一个参数为transaction对象,第二个为执行查询操作时返回的查询到的结果数据集对象。
第四个参数:执行sql语句错误时调用的回调函数
              如:
              
 
 
3.本地缓存API(离线web应用程序)
->离线web应用程序:当哭护短本地与web应用程序没有建立连接时,也能正常在客户端本地使用该web应用。
 
程序进行有关操作。
<1>本地缓存与浏览器网页缓存的区别
 
开发出更为强大的离线应用程序。
 
<2>manifest文件
 
第一行必须是"CACHE MANIFEST"文字。当然运行离线web应用程序的时候,需要对服务器进行配置,让服务器支持text/cache-manifest这个MIME类型。Apache服务器和IIS服务器都有相应的配置。manifest文件中的注释以”#“开头。
 
<3>applicationCache对象
该对象代表了本地缓存,可以使用它来通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存。
当浏览器对本地缓存进行更新时,会触发applicationCache的updateready事件。
applicationCache.onUpdateReady=function(){
alert("本地缓存已被更新!");
}
 
<4>swapCache方法
该方法用来手动执行本地缓存的更新,他只能在applicationCache对象的updateready事件被触发时调用。
如:
applicationCache.onUpdateReady=function(){
alert("正在更新本地缓存!");
applicationCache.swapCache();
alert("本地缓存已被更新!");
}

如果不加applicationCache.swapCache();会怎么样?

不加的话,本地缓存也会被更新,但是更新的时间是在下次打开本页面时被更新。
加上的话,本地缓存会立即被更新。
看个具体的例子:
 
 
<5>applicationCache事件
 
 
 
4.跨文档消息传输
HTML5提供了跨域,跨文档的通信。
首先必须监视message事件。
window.addEventListener("message",function(){.....},false);
 
使用window对象的postMessage方法向其他窗口发送消息。
otherWindow.postMessage(message,targetOrigin);

otherWindow为要发送窗口对象的引用。

第一个参数:要发送的消息文本
第二个参数:接受消息的对象窗口URL地址
 
//发送消息
iframe.postMessage("您好","目标地址");
//接受消息
window.addEventListener("meeage",function(ev){
alert("从"+ev.origin+"那里传过来的信息:\n\""+ev.data+"\"");
},false);
 
5.Web Sockets API
Web Sockets是HTML5提供的在web应用程序中客户端与服务器断之间进行的非HTTP的通信机制。
建立的这种通信机制是实时的,永久的,除非被显式的关闭。
Web Sockets API不仅仅可以发送文本,而且还可以使用JSON对象来发送一切js中的对象。
如:
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();
另外通过读取readyState的属性值来获取WebSocket的状态。
connecting(数字0),表示正在连接。
open(数字1),表示已建立连接。

closing(数字2),表示正在关闭连接。

closed(数字2),表示已关闭连接。
 
6.Web Workers API
Web Workers是在html5中新增的,用来在web应用程序中实现后台处理的一项技术。
在使用HTML4与javascript创建的Web程序中,因为所有的处理都是在单线程内执行的,所以话费的事件比较长。
程序界面长期处于没有响应的状态。最糟糕的是可能直接崩溃。
所以Web Workers就诞生了。Web WorkersAPI,用户可以用它创建一个在后台运行的线程。将可能耗费时间较长的处理交给后台去执行。
这样对用户在前台界面的执行操作就完全没有影响了。实现了一种多线程的功能。
worker.onmessage=function(event){
//处理接收到的消息
}
 
如:
主页面js:
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);
}
主页面html:
输入数值:<input type="text" id="num"/>
<button onclick="cal()">计算</button>
 
 
单独的Sum.js
onmessage=function(event){
var num=event.data;
var result=0;
for(var i=0;i<=num,i++){
result+=i;
}
postMessage(result);
}
 
7.Geolocation API(地理位置信息)
<1>取得当前地理位置
void getCurrentPosition(onSuccess,onError,options);
onSuccess:获取当前地理位置成功时的回调函数
用法:
navigator.geolocation.getCurrentPosition(function(position){
//成功时的处理
})
 
onError:获取当前地理位置失败时的回调函数
用法:该回调使用error对象作为参数,有两个属性
code:
    用户拒绝了位置服务(属性值为1)
    获取不到位置信息(属性值为2)
    获取信息超时错误(属性值为3)
message
例子:
 
 
options:可选属性列表
a:enableHighAccuracy:是否要求高精度的地理位置信息。
b:timeout:对地理位置信息的获取做一个超时限制。
c:maximumAge:对地理位置信息进行缓存的有效时间。
 
<2>在页面时使用google地图
 
 
 

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)的更多相关文章

  1. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  2. JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  3. JavaScript权威设计--JavaScript词法结构(简要学习笔记二)

    1.字符集 JavaScript是用Unicode字符集编写的 2.区分大小写 html不区分大小写,xhtml区分大小写 如:html中onclick可以写成Onclick 但是js中必须写成onc ...

  4. (6)《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  5. HTML5权威指南 中文版 高清PDF扫描版​

    HTML5权威指南是一本系统学习网页设计的权威参考图书.<HTML5权威指南>分为五部分:第一部分介绍学习本书的预备知识和HTML.CSS和JavaScript的最新进展:第二部分讨论HT ...

  6. 《HTML5权威指南》

    <HTML5权威指南> HTML元素: html字符实体 html全局属性 html base标签 用元数据元素说明文档 标记文字(第八章) 标记文字.组织内容.文档分节 表格元素 表单元 ...

  7. html5权威指南:标记文字

    html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...

  8. 【01】《html5权威指南》(扫描版)(全)

    [01]<html5权威指南>(扫描版)(全) []魔芋:无高清电子书.   只看第五部分,高级功能. 作者:(美)弗里曼 著,谢延晟,牛化成,刘美英 译 [美]adam freeman ...

  9. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

随机推荐

  1. Windows平台分布式架构实践 - 负载均衡

    概述 最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Linux和Mac上运行.那么大家(开发者和企业)为 ...

  2. iOS系列文章

    本博客全为原创,如果借鉴了其他文章会在博文的下面进行说明.欢迎转载,但要在文章中给出原文链接,谢谢. 有链接的说明已经发布,没有链接的说明还没有发布. 并不是所有的博文都在这里罗列,有兴趣的可以看博客 ...

  3. git亲测命令

    一.Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream bra ...

  4. Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips (转)

    忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...

  5. java中易错点(一)

    由于replaceAll方法的第一个参数是一个正则表达式,而"."在正则表达式中表示任何字符,所以会把前面字符串的所有字符都替换成"/".如果想替换的只是&qu ...

  6. 如何用Java类配置Spring MVC(不通过web.xml和XML方式)

    DispatcherServlet是Spring MVC的核心,按照传统方式, 需要把它配置到web.xml中. 我个人比较不喜欢XML配置方式, XML看起来太累, 冗长繁琐. 还好借助于Servl ...

  7. 【JS基础】正则表达式

    正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z ...

  8. 基于Vue2.0的单页面开发方案

    2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...

  9. iOS从零开始学习直播之2.采集

      直播的采集由采集的设备(摄像头.话筒)不同分为视频采集和音频采集,本篇文章会分别介绍. 1.采集步骤   1.创建捕捉会话(AVCaptureSession),iOS调用相机和话筒之前都需要创建捕 ...

  10. ORACLE中STATUS为INACTIVE但是SERVER为SHARED状态的会话浅析

    我们知道当ORACLE数据库启用共享服务器模式时,通过共享服务器模式连接到数据库的会话是有一些特征的.在v$session里面,其SERVER的状态一般为SHARED和NONE, 为SHARED时,表 ...