js-新兴的API,最佳实践,离线应用于客户端存储
离线应用于客户端存储：
1、离线检测：online以及offline事件，都是在window对象上触发
navigator.online为true的时候是表示设备能够上网
2、使用一个描述文件（manifest file）列出要下载以及缓存的资源
<html manifest ="/offline.manifest">
3、描述文件中的核心是applicationCache对象，该对象有一个status属性，属性的值是一个常量
0：无缓存
1：闲置-应用缓存未得到更新
2：检查中-正在下载描述文件并且检查更新
3：下载中
4：更新完成，通过swapCache（）来使用
5：废弃
相关的事件：
checking：在浏览器为应用缓存查找更新时触发
error：
noupdate：检查发现无变化
downloading：在开始下载应用缓存的时候开始触发
progress：在文件下载应用缓存的过程中不断触发
updateready：新的应用缓存下载完毕，并且可以通过swapCache（）使用时触发
cached：在应用缓存完整可用的时候触发
EventUtil.addHandler(applicationCache,"updateready",function(){
applicationCache.swapCache();
});
4、cooki的构成：
名称：不区分大小写，被URL编码
值：字符串值，被URL编码
域：
路径：
失效时间：
安全标志：在https安全下才发送cookie
每一段信息都作为Set-Cookie头的一部分，使用分号加空格分隔每一段
5、
var CookieUtil={
get:function(name){
var cookieName=encodeURIComponent(name)+"=",
cookieStart=document.cookie.indexOf(cookieName),
cookieValue=null;
if(cookieStart>-1){
var cookieEnd=document.cookie.indexOf(";",cookieStart);
if(cookieEnd==-1){
cookieEnd=document.cookie.length;
}
cookieValue=decodeURICompanent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
}
return cookieValue;
},
set:function(name,value,expires,path,domain,secure){
var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);
if(expires instanceof date){
cookieText+="; expires="+expires.toGMTSring();
}
if(path){
cookieText+="; path="+path;
}
if(domain){
cookieText+="; domian="+domain;
}
if(secure){
cookieText+="; secure"
}
documment.cookie=cookieText;
},
unset:function(name,path,domain,secure){
this.set(name,"",new Date(0),path,domain,secure);
}
};
//设置cookie
CookieUtil.set("name","zhang");
CookieUtil.set("book","aaaa");
//读取cookie的值
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));
//删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book");
//设置cookie
CookieUtil.set("name","zhang","/books/proj/","www.wrox.com",new Date("January 1,2010"))
//删除刚设置的cookie
CookieUtil.unset("name","/books/proj/","www.wrox.com");
//设置安全的cookie
CookieUtil.set("name","zhang",null,null,null,true);
6、web存储机制
sessionStorage对象：
//使用方法存储
sessionStorage.setItem("name","zhang");
//使用属性存储数据
sessionStorage.book="ppppp";
//使用方法获取
var name=sessionStorage.getItem("name");
//使用属性获取
var book=sessionStorage.book;
迭代sessionStorage中的值：
for(var i=0,len=sessionStorage.length;i<len;i++){
var key=sessionStorage.key(i);
var value=sessionStorage.getItem(key);
alert(key+"="+value);
}
Key方法取得指定位置上的名字，getItem（）找出对应名字的值
删除数据：
delete sessionStorage.name;
sessionStorage.removeItem("book");
storage事件：
domain：发生变化的存储空间的域名
key：设置或删除的键名
newValue：如果是设置值，则是新值，如果是删除键，则是null
oldValue：键被更改之前的值
EventUtil.addHandler(document,"storage",function(event){
alert("Storage changed for"+event.domian);
});
7、IE用户数据
<div style="behavior:url(#default#userData)" id="dataStore"></div>
dataStore.setAttribute("name","zhang");
dataStore.setAttribute("book","zzzz");
dataStore.save("BookInfo");
dataStore.load("BookInfo");
alert(dataStore.getAttribute("name"));
alert(dataStore.getAttribute("book"));
dataStore.removeAttribute("name");
dataStore.removeAttribute("book");
dataStore.save("BookInfo");
8、IndexedDB：保存结构化数据的一种数据库，异步进行的，触发onerror或onsuccess事件，操作以请求方式进行，这些操作会在后期执行
var indexedDB=window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
- 打开indexDB.open（）
if(database.version!="1.0"){
var request,database;
request=database.setVersion("1.0");
request=indexedDB.open("admmin");
request.onerror=function(event){
alert("something bad happened while trying to open:"+
event.target.errorCode);
};
request.onsuccess=function(event){
database=event.target.result;
};
}else{
alert("database initalization.Database name:"+database.name+", Version:" + database.version);
}
- 对象存储空间
var store=db.createObjectStorage("users",{keyPath:"username"})
- add（）以及put（）方法向其中添加数据，接收一个参数，及要保存的对象
区别是在空间中已经包含了键值相同的对象时候会体现出来，add会返回错误，put会重写原有对象，add是插入新值，put是更新
var i=0,
request,
requests=[];
while(i<len){
request=store.add(users[i++]);
request.onerror=function(){
};
request.onsuccess=function(){
};
requests.push(request);
}
- 事务：
var transaction=db.transaction("uesrs");---只读
READ_WRITE--读写
VERSION_CHANGE--改变
READ_ONLY--只读
var transaction=db.transaction("uesrs"，IDBTransaction. READ_WRITE-);
var transaction=db.transaction("uesrs").objectStore("users").get("007");
- 在oncomplete事件中的事件对象是访问不到get（）请求返回任何的数据，只有在onsuccess事件处理程序中才能访问到数据
- 使用事务可以直接通过已知的键检索单个对象，在需要检索多个对象的情况下，则需要在事务内创建游标openCursor（）
var store =db.transaction("uesrs").objectStore("users"),
request=store.openCursor();
request.onsuccess=function(event){
};
request.onerror=function(event){
};
在onsucce事件处理程序执行中，通过event.target.result取得下一个对象
在结果集中有下一项的时候，属性保存IDBCursor的实例，没有下一项的时候，值为null
direction：数值，表示游标移动的方向IDBCCursor.NEXT(0),表示下一项，
IDBCursor.NEXT_NO_DUPLICATE表示下一项不重复的项，DBCursor.PREV(2)表示上一项，DBCursor.PREV_NO_DUPLICATE表示前一个不重复的项
key：对象的键
value：实际的对象
primaryKey：游标使用的键
request.onsuccess=function(event){
var cursor=event.target.result;
if(cursor){
console.log("key:"+cursor.key+",value:"+JSON.stringify|cursor.value);
}
};
delete（），请求删除当前项
continue（key）：移动到结果集中的下一项，参数key是可选的，不指定这个参数，游标移动到下一项，指定这个参数，游标会移动到指定键的位置
advance（count）：向前移动count指定的项数
最佳实践：
1、
var found=false; //boolean
var count=-1; //数字
var name=""; //string
var person=null;//object
var bFound; //boolean
var iCount;//数字
var sName;//string
var oPerson;//object
2、
function sortArray(values){
if(value != null){ //不推荐
values.sort(comparator);
}
}
function sortArray(values){
if(value instanceof Array){ //推荐
values.sort(comparator);
}
}
3、避免全局查找
var doc=document;
var image=doc.getAttribute("img")
4、
var list=document.getElementById("myList"),
html="",
i;
for(i=0;i<10;i++){
html+="<li>Item"+i+"</li>";
}
list.innerHTML=html;
var list=document.getElementById("myList"),
i;
for(i=0;i<10;i++){
list.innerHTML+="<li>Item"+i+"</li>"; //避免
}
新兴的API：
1、页面是否对用户可见：
document.hidden:表示页面是否掩藏的布尔值
document.visibilityState:在后台标签中或浏览器最小化；在前台标签页中；
实际的页面已经掩藏，用户可以看到预览，eg：在鼠标放在那位置上的时候，可以看到当前页面的预览；
页面在屏幕外执行预渲染处理
Visibilitychange事件：文档从可变变为不可见或者不可见变为可见的时候
if(document.hidden || document.msHidden || document.webkitHidden){
}else{
//页面未掩藏
}
EventUtil.addHandler(document,"msvisibilitychange",handleVisibilityChange);
2、地理定位：navigator.geolocation对象
getCurrentPosition()；接收3个参数，成功回调函数，可选的失败回调函数，可选的选项对象
成功回调函数接收一个Position对象参数，该对象有两个属性，coords以及timestamp
coords对象包含以下位置相关信息：
latitude:十进制表示的纬度
longtitude:十进制表示的经度
accuracy：经，纬度坐标的经度，以米为单位
3、File API：file对象
name:
size:文件的字节大小
type:字符串，文件的mime类型
lastModifiedDate:文件上一次修改的时间，字符串
var filesList=document.getElementById("files-list");
EventUtil.addHandler(filesList,"change",function(event){
var files=EventUtil.getTarget(event).files,
i=0,
len=files.length;
while(i<len){
console.log(files[i].name+"("+files[i]+","+files[i].size+"bytes")"};
i++;
}
});
4、
readAsText(file,encoding):以纯文本的形式读取文件，将读取的文本存到result属性中
readAsDataURL(file):读取文件并以数据url的形式保存在result属性中
readAsArrayBuffer(file):读取文件，并将包含文件内容的ArrayBuffer存在result属性中
事件：progress（是否又读取了新数据），error，load
var fileList=document.getElementById("files-list");
EventUtil.addHandler(fileList,"change",function(event){
var info="",
output=document.getElementById("output"),
progress=document.getElementById("progress"),
files=EventUtil.getTarget(event).files,
type="default",
reader=new FileReader();
if(/image/.test[files[0].type]){
reader.readAsDataURL(files[0]);
type="image";
}else{
reader.readAsText(files[0]);
type="text";
}
reader.onerror=function(){
output.innerHTML="Could ";
};
reader.onprogress=function(event){
if(event.lengthComputable){
progress.innerHTML=event.loadded+"/"+event.total;
}
};
reader.onlaod=function(){
var html="";
switch(type){
case "image":
html="<image src=\""+reader.result+"\">";
break;
case "text":
html=reader.result;
break;
}
output.innerHTML=html;
};
});
中断读取过程，可以调用abort（）方法，触发abort事件，
5、读取部分内容
Slice（）方法，接收两个参数，起始节点以及要读取的字节数，返回一个Blob的实例
6、读取拖放的文件
在event.dataTransfer.file中读取到被放置的文件
触发的是dragenter以及dragover以及drop事件
7、使用XHR上传文件
var droptarget=document.getElementById("droptarget");
function handleEvent(event){
var info="",
output=document.getElementById("output"),
data,
xhr,
files,
i,
len;
EventUtil.preventDefault(event);
if(event.type=="drop"){
data=new FormData();
files=event.dataTransfer.files;
i=0;
len=files.length;
while(i<len){
data.append("file"+i,files[i]);
i++;
}
xhr=new XMLHttpRequest();
xhr.open("post","FileAPIExample06Upload.php",true);
xhr.onreadystate==4){
alert(xhr.responseText);
};
xhhr.send(data);
}
}
EventUtil.addHandler(droptarget,"dragenter",handleEvent);
EventUtil.addHandler(droptarget,"dragover",handleEvent);
EventUtil.addHandler(droptarget,"drop",handleEvent);
js-新兴的API,最佳实践,离线应用于客户端存储的更多相关文章
- 我所理解的Restful API最佳实践
一直在公司负责API数据接口的开发,期间也遇到了不小的坑,本篇博客算是做一个小小的记录. 1. 不要纠结于无意义的规范 在开始本文之前,我想先说这么一句:RESTful 真的很好,但它只是一种软 ...
- ASP.NET Core Web API 最佳实践指南
原文地址: ASP.NET-Core-Web-API-Best-Practices-Guide 介绍 当我们编写一个项目的时候,我们的主要目标是使它能如期运行,并尽可能地满足所有用户需求. 但是,你难 ...
- 我所认为的RESTful API最佳实践
我所认为的RESTful API最佳实践 不要纠结于无意义的规范 在开始本文之前,我想先说这么一句:RESTful 真的很好,但它只是一种软件架构风格,过度纠结如何遵守规范只是徒增烦恼,也违背了使用它 ...
- REST与RESTFul API最佳实践
我经常会面试一些做PHP的开发者,让我很奇怪的是,10个人总有8个多不知道什么是REST服务,甚至是没有听说过.但RESTFul API已经是现在互联网里对外开放接口的主流模式,可参考: 豆瓣API ...
- [转]ASP.NET Core Web API 最佳实践指南
原文地址: ASP.NET-Core-Web-API-Best-Practices-Guide 转自 介绍# 当我们编写一个项目的时候,我们的主要目标是使它能如期运行,并尽可能地满足所有用户需求. 但 ...
- 《javascript高级程序设计》 第23章 离线应用与客户端存储
23.1 离线检测23.2 应用缓存23.3 数据存储 23.3.1 Cookie 23.3.2 IE 用户数据 23.3.3 Web 存储机制 23.3.4 IndexedDB 23.1 离线检 ...
- 离线应用与客户端存储（cookie storage indexedDB）
离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...
- Restful Api 最佳实践
Web APIs has become an very important topic in the last year. We at M-Way Solutions are working ever ...
- Restful API 最佳实践 (理论篇)
参考: http://www.ibm.com/developerworks/cn/web/1103_chenyan_restapi/ 规划好 资源标示结构 和 URI模式, 是API设计成功的关键 原 ...
随机推荐
- 【mongo】mongo数据转json时特殊类型处理
mongo数据库中的有些数据类型是无法用json序列化的,比如ObjectId或者datetime.datetime类型. 可以通过json.JSONEncoder来处理 import json im ...
- tableView性能优化
针对滑动时出现卡的现象 参考:http://blog.sina.cn/dpool/blog/s/blog_b638dc890101ep3x.html?plg_nld=1&plg_auth=1& ...
- 阻塞队列BlockingQueue 学习
import java.util.Random; import java.util.concurrent.BlockingQueue; import java.util.concurrent.Time ...
- Mysql子查询
1单值(Scalar operand) 只有当外层(Parent)不为空时,才返回相应值:否则返回NULL. note:For the subquery just shown, if t1 were ...
- Mysql相关集锦
1.MyBatis中设置或获取插入的自增主键 http://my.oschina.net/kolbe/blog/512904 2.MySql性能调优与架构设计系列 http://www.cnblogs ...
- IE11 的区别
http://msdn.microsoft.com/zh-tw/visualc/bg182625
- VAssistX的VA Snippet Editor的类注释和函数注释
title:类注释shortcut:=== /******************************************************** [DateTime]:$YEAR$.$M ...
- HTTP长连接和短连接原理浅析
原文出自:HTTP长连接和短连接原理浅析
- hdu2108(判断凸多边形)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2108 题意: 给出一个多边形的所有顶点,判断是不是凸多边形: 思路: 判断凸多边形的方法比较多,如:若 ...
- hdu 2027统计元音
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2027 思路:主要考察gets()函数用法,能够接受输入的空格,如果用%s或是cin>>st ...