HTML5 本地存储
HTML5 本地存儲(chǔ)
- 1、sessionStorage
- 2、localStorage
- 3、Database Storage
- 4、globalStorage
- 5、兼容性
- 參考文獻(xiàn)
本地持久化存儲(chǔ)一直是本地客戶端程序優(yōu)于 web 程序的一個(gè)方面。對(duì)于本地應(yīng)用程序，操作系統(tǒng)會(huì)一共一個(gè)抽象層，用于存儲(chǔ)和獲取特定于應(yīng)用程序的數(shù)據(jù)，例如用戶設(shè)置或者運(yùn)行時(shí)狀態(tài)。這些值可以被存儲(chǔ)于注冊(cè)表、INI 文件，或者其他什么地方，這取決于操作系統(tǒng)的實(shí)現(xiàn)。如果你的本地應(yīng)用程序需要不簡(jiǎn)單是鍵值對(duì)形式的本地存儲(chǔ)，你也可以使用嵌入式數(shù)據(jù)庫(kù)、發(fā)明你自己的文件格式，或者其他很多種解決方案（引自“HTML5本地存儲(chǔ)詳解）。
HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到你本地的計(jì)算機(jī)上，并再以后需要的時(shí)候進(jìn)行獲取。這個(gè)概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候cookie都會(huì)被發(fā)送過去。HTML5的storage是存儲(chǔ)在你的計(jì)算機(jī)上，網(wǎng)站在頁(yè)面加載完畢后可以通過Javascript來(lái)獲取這些數(shù)據(jù)。
1、sessionStorage
檢測(cè)說(shuō)明：
2、localStorage
檢測(cè)方法和sessionStorage相同
說(shuō)明：
舉例
//結(jié)合JSON.stringify使用更強(qiáng)大 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
對(duì)簡(jiǎn)單的數(shù)據(jù)存儲(chǔ)，使用sessionStorage和localStorage能夠很好地完成，但是在對(duì)瑣碎的關(guān)系數(shù)據(jù)進(jìn)行處理之外，它就力所不及了。而這正是 HTML 5 的“Web SQL Database”API 接口的應(yīng)用所在。
A、打開鏈接
var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000); // 打開鏈接 if(!db) { alert("Failed to connect to database."); } // 檢測(cè)連接是否創(chuàng)建成功以上代碼創(chuàng)建了一個(gè)數(shù)據(jù)庫(kù)對(duì)象 db，名稱是 Todo，版本編號(hào)為0.1。db 還帶有描述信息和大概的大小值。如果需要，這個(gè)大小是可以改變的，所以沒有必要預(yù)先假設(shè)允許用戶使用多少空間。
絕不可以假設(shè)該連接已經(jīng)成功建立，即使過去對(duì)于某個(gè)用戶它是成功的。為什么一個(gè)連接會(huì)失敗，存在多個(gè)原因。也許用戶代理出于安全原因拒絕你的訪問，也許設(shè)備存儲(chǔ)有限。面對(duì)活躍而快速進(jìn)化的潛在用戶代理，對(duì)用戶的機(jī)器、軟件及其能力作出假設(shè)是非常不明智的行為。比如，當(dāng)用戶使用手持設(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); }); });C、其它
- Chrome支持； firefox（測(cè)試時(shí)版本4.01）不支持；IE8不支持。
D、示例
//創(chuàng)建數(shù)據(jù)庫(kù) 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
這個(gè)也是html5中提出來(lái)，在瀏覽器關(guān)閉以后，使用globalStorage存儲(chǔ)的信息仍能夠保留下來(lái)，localStorage一樣，域中任何一個(gè)頁(yè)面存儲(chǔ)的信息都能被所有的頁(yè)面共享
基本語(yǔ)法
- globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來(lái)進(jìn)行讀和寫。
- globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網(wǎng)頁(yè)都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來(lái)進(jìn)行讀和寫。
- globalStorage['org'] —— 在.org域名下面的所有網(wǎng)頁(yè)都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來(lái)進(jìn)行讀和寫。
- globalStorage[''] —— 在任何域名下的任何網(wǎng)頁(yè)都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來(lái)進(jìn)行讀和寫
方法屬性
- 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;
其它
- 過期時(shí)間同 localStorage，其它的一些特性也和localStorage相似。
- 現(xiàn)在Firefox只支持當(dāng)前域下的globalStorage存儲(chǔ)， 如果使用公用域會(huì)導(dǎo)致一個(gè)這樣一個(gè)類似的錯(cuò)誤“Security error” code: “1000”。
5、兼容性
| localStorage | 4 | 2 | 8 | 10.50 | 4 |
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
| globalStorage | -- | 2 | -- | -- | -- |
轉(zhuǎn)載于:https://www.cnblogs.com/wangli-66/p/5672724.html
總結(jié)
以上是生活随笔為你收集整理的HTML5 本地存储的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 遗传算法在JobShop中的应用研究（p
- 下一篇： HTML5学习笔记（一）：HTML简介