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设计成功的关键 原 ...
随机推荐
- 【XLL API 函数】xlAbort
C API 中有 15个 Excel 回调函数只能使用 Excel4.Excel4v.Excel12.Excel12v 函数调用(或间接的使用框架函数 Excel 或 Excel12f 调用).也就是 ...
- php面向对象中的静态与抽象，接口
静态又包括: 普通成员: 普通成员是属于对象的 静态成员: 静态成员是属于类的 关键字:static self关键字:在类里面代表该类,前面不用加$ 在静态方法里面不能调用普通成员 在普通方法里面能够 ...
- [Android Pro] root用户删除文件提示：Operation not permitted
reference to : http://blog.csdn.net/evanbai/article/details/6187578 一些文件看上去可能一切正常,但当您尝试删除的时候,居然也会报错, ...
- SQL Server 数据类型
数据类型的选择帮助优化查询,比如针对int类型列和针对文本类型列可能会生成完全不同的查询计划 三种数据类型: 系统数据类型 别名数据类型:用户可以为系统数据类型提供一个别名,并且可以对数据类型做进一步 ...
- Swing开发之JComboBox篇
http://blog.csdn.net/sjf0115/article/details/6991579
- PHP之MVC项目实战
本文主要包括以下内容 类文件自动加载 路径管理 页面跳转 注册自动加载方法 配置文件系统 cookie session 类文件自动加载 在PHP中使用别的类时,需要载入类文件,如果类很多的话,需要重复 ...
- logstash json和rubydebug 第次重启logstash都会把所有的日志读完 而不是只读入新输入的内容
查看一下agent端的shipper的配置: # cat logstash_test2.shipper.conf input { file { path => ["/apps/logs ...
- Bootstrap 排版 笔记
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- 【JAVA集合框架之工具类】
一.概述 JAVA集合框架中有两个很重要的工具类,一个是Collections,另一个是Arrays.分别封装了对集合的操作方法和对数组的操作方法,这些操作方法使得程序员的开发更加高效. public ...
- java中常用的工具类（一）
我们java程序员在开发项目的是常常会用到一些工具类.今天我汇总了一下java中常用的工具方法.大家可以在项目中使用.可以收藏!加入IT江湖官方群:383126909 我们一起成长 一.String工 ...