标签：join 存储机制 cookie result 查询 指定 对象 add 参数
1.离线检测：H5定义了navigator.online属性，为true 表示设备能上网
还定义了两个相关事件：online和offline
2 数据存储
/* 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都会由浏览器作为请求头发送，不能存储大量信息，不能存储重要 敏感的数据（他人可以访问到）
3. 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
标签：join 存储机制 cookie result 查询 指定 对象 add 参数
原文地址：http://www.cnblogs.com/sundjly/p/7898939.html
