瀏覽器相關--H5本地存儲
這一系列主要研究一下瀏覽器底層的一些東西，包括協議、存儲、底層變量、部分API等。
今天首先介紹一下瀏覽器底層存儲技術。
瀏覽器存儲主要包括一下幾個部分
1. cookie
2. localStorage
3. sessionStorage
4. indexDB
5. websql
6. window變量
7. flash cookie
下面具體說一下，雖然也沒特別具體。。。
1、cookie
這個存儲用了很久了，而且也是以前大多網站十分喜歡的存儲站點。但是也很容易被清除。同時cookie會在每一次通信過程中傳向服務端。用法十分親民，
document.cookie = a + ‘=‘ + b + ‘;expires=‘ + newDate().toGMTString()
2、localStorage、sessionStorage
這兩個就很好說啦，大家使用頻率很高的。
- localStorage: 持久存儲，只要用戶不主動刪除就會一直存在。
- sessionStorage：面向session的瀏覽器存儲，因此只存在於一個頁面的生命周期內，關閉即清除
兩者均采用鍵值對的形式存儲數據，使用方式如下
localStorage.setItem(name, value); localStorage.getItem(name); localStorage.name; sessionStorage.setItem(name, value); sessionStorage.getItem(name); sessionStorage.name;
3、indexedDB
內嵌在瀏覽器端的非關系型數據庫，數據以鍵值對的形式存儲，兼容性良好。
indexDB直接操作的存儲對象是ObjectStore，這有點類似其他數據庫中table概念。
基礎語法
/* * 獲取indexDB對象 */ var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; /* * 創建數據庫，存在則打開，不存在則創建 * * name: 數據庫名 * ver: 版本號 */ varrequest = indexedDB.open(name, ver); /* * indexDB的三個回調函數 * 1、錯誤回調 * 2、版本升級/數據庫第一次創建調用函數 * 3、數據庫創建成功回調 * ojName：ObjectStore，存儲空間名 */ request.onerror = function(e) {}; request.onupgradeneeded = function(event) { var db = event.target.result; var store = db.createObjectStore(ojName, { keyPath: "name", unique: false }) }; request.onsuccess = function(event) { var idb = event.target.result; // 獲得數據庫實例 var tx = idb.transaction(ojName, "readwrite"); // 創建事務 var objst = tx.objectStore(ojName); var qr = objst.add({ "name": name, "value": value }) }; // 關閉數據庫 idb.close() // 其他語法 /* * 其他語法 * 1、增 * 2、刪 * 3、改 * 4、查 */ objst.add({ key: ‘key‘, value: ‘value‘ }) objst.delete(key) objst.put({ key: ‘key‘, value: ‘value‘ }) var qr = objst.get(name); var indexdbCode = ‘‘; qr.onsuccess = function(event) { if (qr.result === undefined) { indexdbCode = ‘‘; console.log(‘===‘+indexdbCode); } else { indexdbCode = qr.result.value; console.log(‘>>>‘+indexdbCode); } };
具體使用
下面是一個簡單的添加數據的例子
function storeIndexDB(name, value) { try { if (!(‘indexedDB‘ in window)) { indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; } if (indexedDB) { var ver = 1; var request = indexedDB.open("db_test", ver); // 打開或穿件數據庫，ver為版本號 request.onerror = function(e) {; } request.onupgradeneeded = function(event) { var db = event.target.result; var store = db.createObjectStore("friends", { keyPath: "name", unique: false }) } if (value !== undefined) { request.onsuccess = function(event) { var idb = event.target.result; if (idb.objectStoreNames.contains("friends")) { var tx = idb.transaction(["friends"], "readwrite"); var objst = tx.objectStore("friends"); var qr = objst.add({ "name": name, "value": value }) } idb.close(); } } } } catch (e) {} }
4、websql
內嵌在瀏覽器的關系型數據庫，是的前端可以像在使用mysql、Oracle一樣的寫sql語句，並存儲信息。兼容性良好。存儲後可在瀏覽器resource中查看。
基礎語法
/* * 創建數據庫，存在則打開，不存在則創建 * * name: 數據庫名 * version: 版本號 * desc：描述 * size：大小 */ var database = window.openDatabase(name, version, desc, size); /* *執行sql語句 * * sql: 就是要執行的sql語句，用過mysql或者oracle的一定會非常熟悉 * params：sql中需要匹配的參數，本身是一個數組，參數中間用英文逗號間隔 * callBackFunSuccess：sql執行成功回調函數 * callBackFunErr：sql執行失敗回調函數 */ database.transaction(function(tx) { tx.executeSql(sql,params,callBackFunSuccess,callBackFunErr); });
具體使用
// 創建數據庫 var database = window.openDatabase("sqlite_test", "", "test", 1024 * 1024); // 新建表test database.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS test(" + "id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " + "name TEXT NOT NULL, " + "value TEXT NOT NULL, " + "UNIQUE (name)" + ")", [], function(tx, rs) {}, function(tx, err) {}); }); // 向test添加數據 database.transaction(function(tx) { tx.executeSql("INSERT OR REPLACE INTO test(name, value) " + "VALUES(?, ?)", [name, value], function(tx, rs) {}, function(tx, err) {}); }); // 從test查詢數據 database.transaction(function(tx) { tx.executeSql("SELECT value FROM test WHERE name=?", [‘tom‘],function(tx, result1) { if (result1.rows.length >= 1) { console.log(result1.rows.item(0).value); } else { console.log(sqlCode); } }, function(tx, err) {}); }); // 更新數據 db.transaction(function(tx) { tx.executeSql("update test set mytitle=? where mytitle = ‘fsafdsaf‘",[‘xp‘],null,null); }); // 刪除test中全部數據 db.transaction(function(tx) { tx.executeSql("delete from test",[],null,null); }); // 刪除某個數據 db.transaction(function(tx) { tx.executeSql("delete from test where id = ?",[‘10010‘],null,null); }); // 刪除表 db.transaction(function(tx) { tx.executeSql("DROP TABLE test"); });
5、window變量
這是一個比較猥瑣的地方，生命周期有限，一般大家也不會去使用。但是對於全局變量的臨時存儲來說，還是一個不可多得的好地方。
6、flash cookie
flash cookie現在用的地方比較多，在這裏先不細說，後面單開一個好好理一理。
除了上述的瀏覽器存儲外，還有一些其他的。比如IE使用的userData，globalStorage等等。寫個例子，不多說了，你懂得。
// IE USERDATA try { var elm = this.createElem("div", "userdata_el", 1); if (elm.addBehavior) { elm.style.behavior = "url(#default#userData)"; if (value !== undefined) { elm.setAttribute(name, value); elm.save(name); } else { elm.load(name); return elm.getAttribute(name); } } } catch (e) {} // IE GLOBALSTORAGE var globalStorage = window.globalStorage if (globalStorage) { var host = this.getHost(); try { if (value !== undefined) { globalStorage[host][name] = value; } else { return globalStorage[host][name]; } } catch (e) { } }
上面呢，主要就是現在瀏覽器中比較常用的存儲技術，說的不是特別詳細，只是介紹了一下簡單的使用，想細研究的可以再去看看官方資料和大神們的博客。
大神們的博客，推薦大家看一下，說的很詳盡，
1、html5 web IndexedDB使用詳解： http://blog.csdn.net/rdj_miss/article/details/51285097
2、HTML5本地存儲——IndexedDB：http://www.cnblogs.com/dolphinX/p/3415761.html
3、HBuilder webApp開發 Websql增刪改查操作：http://blog.csdn.net/zhuming3834/article/details/51471434
瀏覽器相關--H5本地存儲