整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
.在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用。
2.在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
如何使用：
一、頁面頭部像下面一樣加入一個manifest的屬性；
二、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
離線存儲的manifest一般由三個部分組成:
1.CACHE:表示需要離線存儲的資源列表，由于包含manifest文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。
2.NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說CACHE的優(yōu)先級更高。
3.FALLBACK:表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問offline.html
三、在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)。
第一個Web存儲的技術(shù)叫做Cookie，它是網(wǎng)站的身份證。是網(wǎng)站為了辨別用戶身份，進行session（服務(wù)端的session）跟蹤而存儲在用戶本地終端上的數(shù)據(jù)，也就是說它是存在電腦硬盤上的，一個很小的txt類型的文件。Cookie每次都會跟隨http請求發(fā)送到服務(wù)端，也就是說每一個http請求都會帶上我們的cookie數(shù)據(jù)，因此它存在一個安全性的問題。
cookie本身也是有很大的局限性的，首先它很小，主流的瀏覽器最大支持 4096 字節(jié)，除了最大字節(jié)的限制，每個網(wǎng)站的cookie個數(shù)（也就是每一個first每一個域）也是有限制的，一般瀏覽器是20個。除此之外，cookie還會默認(rèn)跟隨所有http請求發(fā)送，即使不需要使用這個cookie來鑒別用戶但是它也是會跟隨http請求發(fā)送的，這樣就會造成一個網(wǎng)絡(luò)資源的浪費。然后部分的瀏覽器還限制了總的cookie個數(shù)300個。
在cookie的諸多局限性下，Web Storage應(yīng)運而生。Web Storage 解決了很多問題：
比如它支持存儲大量數(shù)據(jù)，支持復(fù)雜的本地數(shù)據(jù)庫，而且也不會默認(rèn)跟隨http請求。Web Storage主要是有四個：
Cookie是HTML4的一個標(biāo)準(zhǔn)，它一般不需要考慮兼容。它是網(wǎng)站的一個身份證，服務(wù)器可以針對不同用戶，做出不同的響應(yīng)。cookie存儲在用戶的機器上是一個純文本，就是一個txt文件并不是一個腳本，它不能執(zhí)行東西只負(fù)責(zé)記錄。瀏覽器每次請求都會帶上當(dāng)前網(wǎng)站的cookie。
Cookie分為兩種類型，一種呢是會話cookie，也就是臨時性的cookie，退出瀏覽器或者是關(guān)閉即刪除；
另一種叫持久cookie，它會一直存在，存在的時間由特定的過期時間或者是有效期來決定。
Cookie的域 Domain決定了當(dāng)前的一個cookie的權(quán)限，哪一個域可以使用這個cookie。
Cookie的路徑 Path，下面一個簡單的例子：
www.baidu.com id="123456" domain="www.baidu.com" www.baidu.com/user id="123456" user="eric" domain="www.baidu.com" path="/user/" ? www.baidu.com/search id="123456"; www.baidu.com/user/search id="123456" user="eric";
如上www.baidu.com設(shè)置了一個id等于123456，domain是www.baidu.com，然后另外一個跟第一個一樣多設(shè)置了一個user，id相同，但是多了一個user=“Eric”，它的domain設(shè)置成了www.baidu.com，path就到了user下面。這兩者設(shè)置完成之后，當(dāng)我們訪問www.baidu.com/search時百度只能拿到id，因為user="Eric"是屬于user這個域下面的，也就是說在search下面是獲取不到的，但是在www.baidu.com/user/search這個時候我們就可以獲取到名叫Eric的user。Path也是一種權(quán)限的控制只是相較于域domain是低一級的。
Cookie的安全secure，如果這個屬性為TRUE，那么網(wǎng)站只有在https的請求下面才會攜帶當(dāng)前的cookie。
Cookie的HttpOnly這個屬性如果為TRUE，那么就不允許JavaScript操作cookie。
因為cookie是存儲在客戶端一個獨立的文件，因此服務(wù)器是無法分辨用戶和攻擊者的。關(guān)于cookie的目的分為兩種：一種是跨站點腳本攻擊，一種是跨站請求偽造。
key-value的鍵值對，是HTML5新增的一個會話存儲對象。
SessionStorage是臨時保存在同一窗口，也就是同一標(biāo)簽頁的數(shù)據(jù)。如果當(dāng)前標(biāo)簽頁關(guān)閉了，那么SessionStorage也就失效了。這也是SessionStorage最顯著的一個特點：單頁標(biāo)簽限制。
除此之外，它還有的一些特點有：
屬性：
Json對象
LocalStorage也是在瀏覽器的Application下面有一個Local Storage，它和SessionStorage是十分相似的，同樣是key-value鍵值對，也是HTML5的新增存儲對象，它與SessionStorage的特點不同之處在于沒有標(biāo)簽頁的限制和在瀏覽器的無痕模式下LocalStorage是不允許讀取的，永久性的存儲，然后SessionStorage超出限制是覆蓋不會報錯而LocalStorage超出會報錯。
特點**：
屬性：
注意事項：LocalStorage和SessionStorage在web view是不可靠的，web view指的是在開發(fā)混合APP的時候使用了瀏覽器來實現(xiàn)我們的APP，這個時候是不可靠的，因為在瀏覽器崩潰的情況下數(shù)據(jù)可能沒有存進去。
另外一個在IOS瀏覽器中不可重復(fù)setItem，如果重復(fù)會報錯，然后這個時候我們需要先removeItem再添加item。
監(jiān)聽storage的變化
監(jiān)聽storage包括SessionStorage和LocalStorage。然后這里需要提到兩個概念：同源和監(jiān)聽同源網(wǎng)頁。
http://localhost:63342/simpleApp/app/index.html#/ (協(xié)議) (域名) (端口) (路徑)
window.addEventListener("storage", function (event) {
console.log(event.key);
console.log(event.oldValue);
console.log(event.newValue);
console.log(event.url);
console.log(event.storageArea);
});
IndexedDB 背景
基本概念
首先它是一個NoSQL，也就是一個非關(guān)系型數(shù)據(jù)庫。MySQL和Oracle都是關(guān)系型數(shù)據(jù)庫。意思就是說如果建立了兩個表在關(guān)系型數(shù)據(jù)庫里面我們可以通過一個外鏈把多個表聯(lián)系起來，但是NoSQL不行，在NoSQL里面如果想要多個表關(guān)聯(lián)起來，我們只能手動的在關(guān)聯(lián)的表里面添加上需要關(guān)聯(lián)的另外一個或多個表的id。這是NoSQL與MySQL兩者之間的一個區(qū)別。
IndexedDB的特點也是和Storage是一樣的：
IndexedDB幾個基本概念：
IndexedDB瀏覽器兼容
IDBDatabase
IDB是IndexedDB的縮寫，它呢就是數(shù)據(jù)庫，數(shù)據(jù)庫也叫作數(shù)據(jù)的一個容器。每一個源（同源策略）可以建立很多數(shù)據(jù)庫。Database有一個版本的概念，版本對應(yīng)著數(shù)據(jù)庫表，同一時刻只能存在一個版本。比如：新增一個表，然后我們需要把database的版本加一，表里面要新增一列，這時同樣需要把數(shù)據(jù)庫版本加一。
注意：1 同一時刻只能有一個版本存在
? 2 修改數(shù)據(jù)庫結(jié)構(gòu)只能通過升級數(shù)據(jù)庫版本
/* databaseName不存在則創(chuàng)建 */
/* version為整數(shù), 新建時為1 */
?
let database;
let userStore;
const request = window.indexedDB.open(databaseName, version);
?
/* 成功打開數(shù)據(jù)庫 */
request.onsuccess = event => {
database = request.result;
}
?
/* 打開數(shù)據(jù)庫失敗 */
request.onerror = error => {
console.log(error);
}
?
/* 版本號大于當(dāng)前數(shù)據(jù)庫版本 */
request.onupgradeneeded = event => {
database = event.target.result;
}
注意：如果在打開數(shù)據(jù)庫時，數(shù)據(jù)庫不存在，將會新建一個
IDBObjectStore（數(shù)據(jù)庫表）
創(chuàng)建表，最好是在upgradeneeded下執(zhí)行；在創(chuàng)建數(shù)據(jù)庫表的時候需要指定主鍵，主鍵代表了唯一的標(biāo)識，比如 keyPath：‘id’；如果不指定主鍵，我們可以指定一個autoIncrement：true，自增的一個概念，也就是不指定主鍵數(shù)據(jù)庫會自動添加主鍵而且這個主鍵就是數(shù)字，依次遞增的。
const createStore = () => {
//如果當(dāng)前的objectStoreNames.contains包含user，如果不包含user這個表，然后就用這個database.createObjectStore創(chuàng)建了一個表，這個表的名字就叫做user，然后主鍵就是下面的id
if(!db.objectStoreNames.contains('user')) {
userStore = database.createObjectStore('user', { keyPath: 'id' });
}
}
指定索引：
const createStore = () => {
if(!database.objectStoreNames.contains('user')) {
userStore = database.createObjectStore('user', { keyPath: 'id' });
userStore.createIndex('name', 'name', { unique: true });
}
}
IDBTransaction（事務(wù)）
創(chuàng)建完之后需要往里面添加數(shù)據(jù)，添加數(shù)據(jù)我們就需要使用到事務(wù)。
事務(wù)涉及到數(shù)據(jù)庫的增刪改查，它有三個狀態(tài)：
屬性：
數(shù)據(jù)庫的基本操作：增刪改查以及清空。
新增數(shù)據(jù)（add）
分為兩種情況：一種是使用自增的數(shù)據(jù)庫的id或者是自增的一個鍵值，如果已經(jīng)創(chuàng)建主鍵，那么新增必須包含主鍵和另一種已創(chuàng)建主鍵但主鍵不可重復(fù)。
const add = () => {
/* 創(chuàng)建事務(wù) */
/* 使用某個數(shù)據(jù)庫 */
/* add新增 */
transactionRequest = database.transaction(['user'], 'readwrite')
.objectStore('user')
.add({ id: 100, name: 'Eric', age: 28, email: 'Ericlee00@163.com' });
?
/* 成功 */
transactionRequest.onsuccess = event => {
console.log('數(shù)據(jù)寫入成功', event);
};
?
/* 失敗 */
transactionRequest.onerror = error => {
console.log('數(shù)據(jù)寫入失敗', error);
}
}
讀取數(shù)據(jù)（get）
const read = () => {
/* 創(chuàng)建事務(wù) */
transaction = database.transaction(['user']);
/* 選擇數(shù)據(jù)庫表 */
table = transaction.objectStore('user');
/* 讀取數(shù)據(jù) */
transactionRequest = table.get(2);
?
/* 成功 */
transactionRequest.onerror = event => {
console.log('數(shù)據(jù)讀取失敗', event);
};
?
/* 失敗 */
transactionRequest.onsuccess = event => {
if (transactionRequest.result) {
console.log('數(shù)據(jù)讀取成功', transactionRequest.result);
} else {
console.log('未讀取到數(shù)據(jù)');
}
};
}
更新數(shù)據(jù)（put）
更新不存在的數(shù)據(jù)時會新建，也就是說在新增數(shù)據(jù)時如果相同，往往會出錯，但是在更新數(shù)據(jù)時不會出錯。如果數(shù)據(jù)不存在就會新建，如果存在就會一直更新。
const update = () => {
transactionRequest = database.transaction(['user'], 'readwrite')
.objectStore('user')
.put({ id: count, name: 'David', age: 35, email: 'David@xiakedao.com' });
?
transactionRequest.onsuccess = function (event) {
console.log('更新數(shù)據(jù)成功', event);
};
?
transactionRequest.onerror = error => {
console.log('更新數(shù)據(jù)失敗', error);
}
}
刪除數(shù)據(jù)（delete）
const delete = () => {
transactionRequest = database.transaction(['user'], 'readwrite')
.objectStore('user')
.delete(2);
?
transactionRequest.onsuccess = function (event) {
console.log('刪除數(shù)據(jù)成功', event);
};
?
transactionRequest.onerror = error => {
console.log('刪除數(shù)據(jù)失敗', error);
}
}
清空數(shù)據(jù)（clear）
IDBCursor（指針）
提供了一種遍歷數(shù)據(jù)的可能。
const readAll = () => {
table = database.transaction('user').objectStore('user');
?
table.openCursor().onsuccess = () => {
let cursor = event.target.result;
?
if (cursor) {
console.log('數(shù)據(jù)遍歷', cursor);
cursor.continue();
} else {
console.log('數(shù)據(jù)遍歷完成');
}
};
}
關(guān)閉IndexedDB數(shù)據(jù)庫連接
const closeDataBase = () => {
database.close();
}
刪除IndexedDB數(shù)據(jù)庫前，須先關(guān)閉數(shù)據(jù)庫連接
const deleteDataBase = () => {
indexedDB.deleteDatabase('first_database');
}
基本概念：并不是 HTML5 的規(guī)范 ， 只能算是一個獨立的規(guī)范；使用WebSQL是完完全全的SQL 語句，使用SQL語句來操作客戶端數(shù)據(jù)庫；它一共有三個比較重要的概念，分別是：openDatabase 打開數(shù)據(jù)庫，可以是使用現(xiàn)有數(shù)據(jù)庫或者新建數(shù)據(jù)庫；transaction 事務(wù)，所有的數(shù)據(jù)庫都支持事務(wù)；executeSql 執(zhí)行SQL語句。
openDatabase（打開數(shù)據(jù)庫）
相比于IndexedDB的概念稍微多一點，主要是有數(shù)據(jù)庫名稱、版本號（在IndexedDB里面版本號都是整數(shù)，但是在WebSQL里面它可以是小數(shù)）、描述文本（介紹數(shù)據(jù)庫是干什么的）、數(shù)據(jù)庫大小和創(chuàng)建回調(diào)（function，只在第一次創(chuàng)建的時候才會調(diào)用）。
const database = openDatabase('my_database', '1.0', 'first', 2 * 1024 * 1024, function() {
?
});
Transaction（事務(wù)）
const createTable = () => {
database.transaction(function (content) {
content.executeSql('CREATE TABLE IF NOT EXISTS USER (id unique, name)');
});
}
const addData = () => {
database.transaction(function (content) {
content.executeSql('INSERT INTO USER (id, name) VALUES (1, "Eric")');
});
}
const searchData = () => {
database.transaction(function (content) {
content.executeSql('SELECT * FROM USER');
});
}
const updateData = () => {
database.transaction(function (content) {
content.executeSql('UPDATE USER SET name=\'David\' WHERE id=1');
});
}
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法
對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。
用戶訪問頁面次數(shù)的統(tǒng)計，用localStorage對象實現(xiàn)
if (localStorage.pagecount) {
localStorage.pagecount = Number(localStorage.pagecount) + 1;
} else {
localStorage.pagecount = 1;
}
document.write('Visits: ' + localStorage.pagecount + ' time(s).');對用戶在當(dāng)前 session 中訪問頁面的次數(shù)進行計數(shù)
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
