js-新兴的API,最佳实践,离线应用于客户端存储

离线应用于客户端存储：

1、离线检测：online以及offline事件，都是在window对象上触发

navigator.online为true的时候是表示设备能够上网

2、使用一个描述文件（manifest file）列出要下载以及缓存的资源

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用户数据

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="",

for(i=0;i<10;i++){

html+="<li>Item"+i+"</li>";

}

list.innerHTML=html;

var list=document.getElementById("myList"),

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,

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);