AjaxJS中离线应用和客户端存储

1.离线检测:H5定义了navigator.online属性,为true 表示设备会上网
尚定义了一定量只相关事件:online和offline

2 数据存储

  1. cookie——HTTP
    coolie,客户端存储会说话音讯的。该专业要求服务器对擅自的HTTP请求发送Set-库克ie
    HTTP头作为响应的同等局部‘

    /
    HTTP/1.1 200 OK
    Content-type: text/html
    Set-Cookie: name=value;expire=expiration_time;path=domain_path;secure
    Other-header: other-header-value
    这么些HTTP响应设置为name为名称,以value为值的一个cookie,名称与价值当传递时还必通常URL编码
    /

  2. cookie组成:
    1. 名称
    2. 值
    3. 域
    4. 路径
    5. 失效时
    6. 安全标志:cookie只有当动用SSL连接时才发送到服务器

   所有的价与名都经过URL编码,必须以decodeURIComponent()解析

   基本的cookie操作:读取,写副和去

  子cookie:为了绕开浏览器的单域名下cookie的克,使用了子cookie(subcookie)
  格式:
    name=name1=value1&name2=value2&name3=value3

/* 设置子cookie */
var subcookieUtil = {
get: function (name, subName) {
var subcookies = this.getAll(name);
if (subcookies) {
return subcookies[subName];
} else {
return null;
}
},
getAll: function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue,
cookieEnd,
subcookies,
i, len,
parts,
result = {};
if (cookieStart) {
cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = docuemnt.cookie.substring(cookieStart + cookieName.length, cookieEnd);
if (cookieValue.length > 0) {
subcookies = cookieValue.split("&");
for (i = 0, len = subcookies.length; i < len; i++) {
parts = subcookies[i].split("=");
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
set: function (name, subName, value, expires, path, domain, secure) {
var subcookies = this.getAll(name) || {};
suvcookies[subName] = value;
this.setAll(name, subcookies, exprires, path, domain, secure);
},
setAll: function (name, subcookies, exprires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=",
subcookieParts = new Array(),
subName;
for (subName in subcookies) {
if (subcookies.hasOwnProperty(subName) && subName.length > 0) {
subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
}
}
if (subcookieParts.length > 0) {
cookieText += subcookieParts.join("&");
if (expires instanceof Date) {
cookieText += ";expires=" + expires.toGMTString();
}
if (path) {
cookieText += ";path=" + path;
}
if (doamin) {
cookieText += ";domain=" + domain;
}
if (secure) {
cookieText += ';secure';
}
}
document.cookie = cookieText;
},
//删除一个子cookie 而不影响其他
unset: function (name, subName, path, domain, secure) {
var subcookies = this.getAll(name);
if (subcookies) {
delete subcookies(subName);
this.setAll(name, subcookies, null, path, domain, secure);
}
},
// 删除整个cookie
unsetAll: function (name, path, domian, secure) {
this.setAll(name, null, new Date(), path, domain, secure);
}
}

 

出于拥有的cookie都会见出于浏览器作为请求头发送,不能积存大量音讯,不可能积存重要敏感的数额(别人可以拜到)

  1. Web存储机制
      web storage——五个目的:
        1. 提供平等种植cookie以外的积存途径
        2. 资平等种植存储大量好超过会说话有的多少的建制
      Storage对象来艺术: getItem(name) setItem(name,value)
      web storage规范了片只window的性质:
        1.
    sessionStorage:该数量到保持至浏览器关闭,它可以领先页面刷新而有——适用于单纯针对会话的小段数据的蕴藏()
        2. globalStorage:跨越会讲话存储数据,但假若指定哪些域可以看

    // 保存只可以www.wrox.com域下才会顾的name 类似于Ajax的同源策咯
    globalStorage[“www.wrox.com”].name=”Nichoas”;

    3. localStorage 替代了globalStorage:无法于localStorage
指定其他访问规则。要拜访与一个localStorage
,页面必须来自同一个域名(子域名无效),使用相同种植协议,在同一个端口上,十分给 globalStorage[location.host]
-事先未可以确定域名时用
    4.
storage事件:任何针对storage对象开展改动,都会合触发storage事件,这多少个波之event有缘下属性

document.addEventListener("storage",function(event){
alert(event.domain);
},false);

          a. domain:域名改变
          b. key 删除、设置键名
          c. newValue 设置值
          d. oldValue
    5.
限量:localStorage而言,大多数浏览器是5MB限制,Chrome对每个来自之限定是2.5MB;对于sessionStorage
因浏览器而异 一般是2.5MB
    6. IndexedDB——indexed database API
是浏览器中保留结构化数据的相同栽数据库(使用对象保存数据)http://www.zhangxinxu.com/wordpress/2017/07/html5-indexeddb-js-example/

var request,database,db;
request=indexedDB.open('admin');
request.onerror=function(event){
alert('something bad happened while trying to open'+event.target.errorCode);
};
request.onsuccess=function(event){
database=event.target.result; db=database;
}; 

        a.
设计操作是异步的,大多数操作以求的艺术进行有onerror和onsuccess事件处理程序
        b. 一开吧indexedDB指定版本号——setVersion()方法
        c. 对象存储空间:(需要把目的中的一个唯一属性作为键)
//创制一个键为username的名字是users的贮存空间 add()/ push()添加
/更新数据

var store=db.createObjectStore("users",{keyPath:"username"}); 

        d. 查询数据:var transaction=db.transaction();
        e.
游标查询:游标是依靠为结果集的指针。在存储空间上调用openCursor()
          1. 键的限量4受方法:only() lowerBound()
upBound() bound()
          2. 设定游标的势头(可选的亚个参数)
        f.
索引:一个目的存储空间指定多单键,将ID作为主键。创制主键:

var store=db.transaction("users").objectStore("users");
var index=store.createIndex("username","username",{unique:false});//设置索引值
var index=store.index("username");//获取索引值

        g. 并发问题:indexedDB即使是异步的
但如故发生出现操作问题,(浏览器多个不等的标签页打开了同一个页面)就要指定版本号setVersion(),指定onversionchange事件处理程序,立刻关闭

// 并发处理
var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
var request=indexedDB.open("admin");
request.onsuccess=function(event){
var database=event.target.result;
database.onversionchange=function(){
database.close();
};
};

        h,限制:indexedDB只好出于同源(相同的商,域和端口)占用磁盘空间有限定,chrome限制5M

 

相关文章