本地存儲-webStorage

webStorage 提供了一種方式讓網站能夠把信息存儲到你本地的計算機上，並在以后需要的時候進行獲取。這個概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候cookie都會被發送過去。而webStorage是存儲在你的計算機上，網站在頁面加載完畢后可以通過Javascript來獲取這些數據。

分為 localStorage 、sessionStorage、globalStorage、Web Sql Database Storage。

 

localStorage：

檢測

!!window.localStorage;

 

常用方法

.key = value

.setItem(key, value)

.getItem(key)

.removeItem(key)

.clear()

 

說明

1. 只把數據存儲在了客戶端使用，不會發送的服務器上（除非你故意這樣做）。
2. 而且對於某一個域下來說，localstorage是共享的（數據可跨越多個窗口，無視當前會話，被共同訪問、使用）。
3. localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

 

舉例

//結合JSON.stringify使用更強大
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem('me')).name);  // 'rainman'
/**
 * JSON.stringify，將JSON數據轉化為字符串
 *     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"]
 */

http://jsfiddle.net/955gvbn4/

 

 

sessionStorage：

檢測

!!window.sessionStorage;

 

常用方法

.key = value

.setItem(key, value)

.getItem(key)

.removeItem(key)

.clear()

 

說明

1. session storage的存儲空間大小，需參照瀏覽器廠商的具體實現。
2. 通過sessionStorage所存儲數據的生命周期，和Session類似，關閉瀏覽器（或標簽頁）后數據就不存在了。但刷新頁面或使用“前進”、“后退按鈕”后sessionStorage仍然存在。
3. sessionStorage每個窗口的值都是獨立的（每個窗口都有自己的數據），它的數據會隨着窗口的關閉而消失，窗口間的sessionStorage也是不可以共享的。
4. setItem中的key、value使用的是字符串的形式進行存儲的。也就是說如果有如下的代碼：setItem(‘count’, 1);通過getItem(‘count’) + 5 得到的將不是預期的6(整數)，而是’16’(字符串)。
5. 再次使用setItem設置已經存在的key的value時，新的值將替代舊的值。
6. 當存儲中的數據發生改變時，會觸發相應的事件（window.onstorage），但目前各瀏覽器對此事件的支持並不完善，暫時可以忽略。

舉例

暫無

 

globalStorage：

常用方法

• globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個命名空間存儲對象來進行讀和寫。
• globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
• globalStorage['org'] —— 在.org域名下面的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
• globalStorage[''] —— 在任何域名下的任何網頁都可以通過這個命名空間存儲對象來進行讀和寫

 

方法屬性

• setItem(key, value) —— 設置或重置 key 值。
• getItem(key) —— 獲取 key 值。
• removeItem(key) —— 刪除 key 值。
• 設置 key 值：window.globalStorage["planabc.net"].key = value;
• 獲取 key 值：value = window.globalStorage["planabc.net"].key;

 

說明

1. 在瀏覽器關閉以后，使用globalStorage存儲的信息仍能夠保留下來，localStorage一樣，域中任何一個頁面存儲的信息都能被所有的頁面共享 。
2. 過期時間同 localStorage，其它的一些特性也和localStorage相似。
3. 現在Firefox只支持當前域下的globalStorage存儲， 如果使用公用域會導致一個這樣一個類似的錯誤“Security error” code: “1000”。

舉例

暫無

 

Database Storage：

運用環境

 

對簡單的數據存儲，使用sessionStorage和localStorage能夠很好地完成，但是在對瑣碎的關系數據進行處理之外，它就力所不及了。而這正是 HTML 5 的“Web SQL Database”API 接口的應用所在。

 

常用方法

• 打開鏈接

var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打開鏈接
if(!db) { alert("Failed to connect to database."); }                         // 檢測連接是否創建成功

以上代碼創建了一個數據庫對象 db，名稱是 ToDo，版本編號為0.1。db 還帶有描述信息和大概的大小值。如果需要，這個大小是可以改變的，所以沒有必要預先假設允許用戶使用多少空間。

絕不可以假設該連接已經成功建立，即使過去對於某個用戶它是成功的。為什么一個連接會失敗，存在多個原因。也許用戶代理出於安全原因拒絕你的訪問，也許設備存儲有限。面對活躍而快速進化的潛在用戶代理，對用戶的機器、軟件及其能力作出假設是非常不明智的行為。比如，當用戶使用手持設備時，他們可自由處置的數據可能只有幾兆字節。

 

• 執行查詢

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); }
    ); 
}); 

1. 執行SQL語句使用database.transaction()函數，該函數只有一個參數，負責執行查詢的函數。
2. 該函數具有一個類型事務的參數（tx）。
3. 該事務參數（tx）具有一個函數：executeSql()。這個函數使用四個參數：
   表示查詢的SQL字符串；插入到查詢中問號所在處的字符串數據；一個成功時執行的函數；一個失敗時執行的函數。
4. 執行成功的函數有兩個參數：tx2，事務性參數；result，執行的返回結果，結構如圖
   
5. 執行成功的函數也有兩個參數：tx2，事務性參數；error，錯誤對象，結構如圖
   

 

• 舉例

//創建數據庫
var db = openDatabase("users", "1.0", "用戶表", 1024 * 1024); 
if(!db){
    alert("Failed to connect to database."); 
} else {
    alert("connect to database 'K'."); 
}
// 創建表
db.transaction( function(tx) { 
    tx.executeSql(
        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)", 
        [], 
        function(){ alert('創建users表成功'); }, 
        function(tx, error){ alert('創建users表失敗:' + error.message); }
    );
}); 
// 插入數據
db.transaction(function(tx) { 
    tx.executeSql(
        "INSERT INTO users (id, name) values(?, ?)", 
        [Math.random(), 'space'], 
        function(){ alert('插入數據成功'); }, 
        function(tx, error){ alert('插入數據失敗: ' + 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'); 
});

兼容性：

 

參考文檔：http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html#m4

 

轉載請注明 www.cnblogs.com/yoshirogu