HTML5storage提供了一種方式讓網(wǎng)站能夠把信息存儲到你本地的計算機上,并再以后需要的時候進行獲取。這個概念和cookie相似,區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie的大小是受限的,并且每次你請求一個新的頁面的時候cookie都會被發(fā)送過去。HTML5的storage是存儲在你的計算機上,網(wǎng)站在頁面加載完畢后可以通過Javascript來獲取這些數(shù)據(jù)。
1、sessionStorage
檢測
!!window.sessionStorage;
常用方法
.key = value .setItem(key,value) .getItem(key) .removeItem(key) .clear()
window.sessionStorage.name = 'rainman'; // 賦值 window.sessionStorage.setItem('name','cnblogs'); // 賦值 window.sessionStorage.getItem('name'); // 取值 window.sessionStorage.removeItem('name'); // 移除值 window.sessionStorage.clear(); // 刪除所有sessionStorage
事件:
window.onstorage
檢測值得變化,瀏覽器支持不好。
說明:
-
cookie的存儲限制在了4k之內(nèi),相比來說,session storage有了更大的存儲空間,但至于具體多大,這要參照瀏覽器廠商的具體實現(xiàn)。
-
cookie有一個機制,就是在每次客戶端請求服務器的時候都會將cookie發(fā)送給服務器,這無疑會做很多不必要的操作,因為并不是每次請求服務器都需要cookie的所有信息,而session storage很好的解決了這個問題,它不是采取自動發(fā)送的方式,這樣就減少了不必要的工作。
-
通過sessionStorage所存儲數(shù)據(jù)的生命周期,和Session類似,關(guān)閉瀏覽器(或標簽頁)后數(shù)據(jù)就不存在了。但刷新頁面或使用“前進”、“后退按鈕”后sessionStorage仍然存在。
-
session storage每個窗口的值都是獨立的(每個窗口都有自己的數(shù)據(jù)),它的數(shù)據(jù)會隨著窗口的關(guān)閉而消失,窗口間的sessionStorage也是不可以共享的。
-
setItem中的key、value使用的是字符串的形式進行存儲的。也就是說如果有如下的代碼:setItem(‘count’, 1);通過getItem(‘count’) + 5 得到的將不是預期的6(整數(shù)),而是’16’(字符串)。
-
再次使用setItem設(shè)置已經(jīng)存在的key的value時,新的值將替代舊的值。
-
當存儲中的數(shù)據(jù)發(fā)生改變時,會觸發(fā)相應的事件(window.onstorage),但目前各瀏覽器對此事件的支持并不完善,暫時可以忽略。
2、localStorage
檢測
!!window.localStorage;
方法和sessionStorage相同
說明:
-
local storage把只把數(shù)據(jù)存儲在了客戶端使用,不會發(fā)送的服務器上(除非你故意這樣做)。
-
而且對于某一個域下來說,local storage是共享的(多個窗口共享一個“數(shù)據(jù)庫”)。
-
localStorage用于持久化的本地存儲,除非主動刪除數(shù)據(jù),否則數(shù)據(jù)是永遠不會過期的。
舉例
//結(jié)合JSON.stringify使用更強大 var person = {'name': 'rainman', 'age': 24}; localStorage.setItem("me", JSON.stringify(person)); JSON.parse(localStorage.getItem('me')).name; // 'rainman' /** * JSON.stringify,將JSON數(shù)據(jù)轉(zhuǎn)化為字符串 * JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}' * JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]' * JSON.parse,反解JSON.stringify * JSON.parse('["a","b","c"]') // ["a","b","c"] */
3、Database Storage
對簡單的數(shù)據(jù)存儲,使用sessionStorage和localStorage能夠很好地完成,但是在對瑣碎的關(guān)系數(shù)據(jù)進行處理之外,它就力所不及了。而這正是 HTML 5 的“Web SQL Database”API 接口的應用所在。
A、打開鏈接
var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000); // 打開鏈接 if(!db) { alert("Failed to connect to database."); } // 檢測連接是否創(chuàng)建成功
以上代碼創(chuàng)建了一個數(shù)據(jù)庫對象 db,名稱是 Todo,版本編號為0.1。db 還帶有描述信息和大概的大小值。如果需要,這個大小是可以改變的,所以沒有必要預先假設(shè)允許用戶使用多少空間。
絕不可以假設(shè)該連接已經(jīng)成功建立,即使過去對于某個用戶它是成功的。為什么一個連接會失敗,存在多個原因。也許用戶代理出于安全原因拒絕你的訪問,也許設(shè)備存儲有限。面對活躍而快速進化的潛在用戶代理,對用戶的機器、軟件及其能力作出假設(shè)是非常不明智的行為。比如,當用戶使用手持設(shè)備時,他們可自由處置的數(shù)據(jù)可能只有幾兆字節(jié)。
B、執(zhí)行查詢
db.transaction( function(tx) { tx.executeSql( "INSERT INTO ToDo (label, timestamp) values(?, ?)", ['lebel', new Date().getTime()], function(tx2, result){ alert('成功'); }, function(tx2, error){ alert('失敗:' + error.message); } ); });
-
執(zhí)行SQL語句使用database.transaction()函數(shù),該函數(shù)只有一個參數(shù),負責執(zhí)行查詢的函數(shù)。
-
該函數(shù)具有一個類型事務的參數(shù)(tx)。
-
該事務參數(shù)(tx)具有一個函數(shù):executeSql()。這個函數(shù)使用四個參數(shù):
表示查詢的SQL字符串;插入到查詢中問號所在處的字符串數(shù)據(jù);一個成功時執(zhí)行的函數(shù);一個失敗時執(zhí)行的函數(shù)。 -
執(zhí)行成功的函數(shù)有兩個參數(shù):tx2,事務性參數(shù);result,執(zhí)行的返回結(jié)果,結(jié)構(gòu)如圖
-
執(zhí)行成功的函數(shù)也有兩個參數(shù):tx2,事務性參數(shù);error,錯誤對象,結(jié)構(gòu)如圖
C、其它
-
Chrome支持; firefox(測試時版本4.01)不支持;IE8不支持。
D、示例
//創(chuàng)建數(shù)據(jù)庫 var db = openDatabase("users", "1.0", "用戶表", 1024 * 1024); if(!db){ alert("Failed to connect to database."); } else { alert("connect to database 'K'."); } // 創(chuàng)建表 db.transaction( function(tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)", [], function(){ alert('創(chuàng)建users表成功'); }, function(tx, error){ alert('創(chuàng)建users表失敗:' + error.message); } ); }); // 插入數(shù)據(jù) db.transaction(function(tx) { tx.executeSql( "INSERT INTO users (id, name) values(?, ?)", [Math.random(), 'space'], function(){ alert('插入數(shù)據(jù)成功'); }, function(tx, error){ alert('插入數(shù)據(jù)失敗: ' + error.message);} ); }); // 查詢 db.transaction( function(tx) { tx.executeSql( "SELECT * FROM users", [], function(tx, result) { var rows = result.rows, length = rows.length, i=0; for(i; i < length; i++) { alert( 'id=' + rows.item(i)['id'] + 'name='+ rows.item(i)['name'] ); } }, function(tx, error){ alert('Select Failed: ' + error.message); } ); }); // 刪除表 db.transaction(function (tx) { tx.executeSql('DROP TABLE users'); });
4、globalStorage
這個也是html5中提出來,在瀏覽器關(guān)閉以后,使用globalStorage存儲的信息仍能夠保留下來,localStorage一樣,域中任何一個頁面存儲的信息都能被所有的頁面共享
基本語法
-
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個命名空間存儲對象來進行讀和寫。
-
globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網(wǎng)頁都可以通過這個命名空間存儲對象來進行讀和寫。
-
globalStorage['org'] —— 在.org域名下面的所有網(wǎng)頁都可以通過這個命名空間存儲對象來進行讀和寫。
-
globalStorage[''] —— 在任何域名下的任何網(wǎng)頁都可以通過這個命名空間存儲對象來進行讀和寫
方法屬性
-
setItem(key, value) —— 設(shè)置或重置 key 值。
-
getItem(key) —— 獲取 key 值。
-
removeItem(key) —— 刪除 key 值。
-
設(shè)置 key 值:window.globalStorage["planabc.net"].key = value;
-
獲取 key 值:value = window.globalStorage["planabc.net"].key;
其它
-
過期時間同 localStorage,其它的一些特性也和localStorage相似。
-
現(xiàn)在Firefox只支持當前域下的globalStorage存儲, 如果使用公用域會導致一個這樣一個類似的錯誤“Security error” code: “1000”。
5、兼容性
方法 |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
localStorage |
4 |
2 |
8 |
10.50 |
4 |
sessionStorage |
5 |
2 |
8 |
10.50 |
4 |
globalStorage |
— |
2 |
— |
— |
— |