HTML5 本地存储
生活随笔
收集整理的這篇文章主要介紹了
HTML5 本地存储
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5 本地存儲
- 1、sessionStorage
- 2、localStorage
- 3、Database Storage
- 4、globalStorage
- 5、兼容性
- 參考文獻
本地持久化存儲一直是本地客戶端程序優(yōu)于 web 程序的一個方面。對于本地應用程序，操作系統(tǒng)會一共一個抽象層，用于存儲和獲取特定于應用程序的數據，例如用戶設置或者運行時狀態(tài)。這些值可以被存儲于注冊表、INI 文件，或者其他什么地方，這取決于操作系統(tǒng)的實現。如果你的本地應用程序需要不簡單是鍵值對形式的本地存儲，你也可以使用嵌入式數據庫、發(fā)明你自己的文件格式，或者其他很多種解決方案（引自“HTML5本地存儲詳解）。
HTML5 storage提供了一種方式讓網站能夠把信息存儲到你本地的計算機上，并再以后需要的時候進行獲取。這個概念和cookie相似，區(qū)別是它是為了更大容量存儲設計的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候cookie都會被發(fā)送過去。HTML5的storage是存儲在你的計算機上，網站在頁面加載完畢后可以通過Javascript來獲取這些數據。
1、sessionStorage
檢測說明：
2、localStorage
檢測方法和sessionStorage相同
說明：
舉例
//結合JSON.stringify使用更強大 var person = {'name': 'rainman', 'age': 24}; localStorage.setItem("me", JSON.stringify(person)); 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"]*/3、Database Storage
對簡單的數據存儲，使用sessionStorage和localStorage能夠很好地完成，但是在對瑣碎的關系數據進行處理之外，它就力所不及了。而這正是 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)建了一個數據庫對象 db，名稱是 Todo，版本編號為0.1。db 還帶有描述信息和大概的大小值。如果需要，這個大小是可以改變的，所以沒有必要預先假設允許用戶使用多少空間。
絕不可以假設該連接已經成功建立，即使過去對于某個用戶它是成功的。為什么一個連接會失敗，存在多個原因。也許用戶代理出于安全原因拒絕你的訪問，也許設備存儲有限。面對活躍而快速進化的潛在用戶代理，對用戶的機器、軟件及其能力作出假設是非常不明智的行為。比如，當用戶使用手持設備時，他們可自由處置的數據可能只有幾兆字節(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（測試時版本4.01）不支持；IE8不支持。
D、示例
//創(chuàng)建數據庫 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); }); }); // 插入數據 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'); });4、globalStorage
這個也是html5中提出來，在瀏覽器關閉以后，使用globalStorage存儲的信息仍能夠保留下來，localStorage一樣，域中任何一個頁面存儲的信息都能被所有的頁面共享
基本語法
- 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;
其它
- 過期時間同 localStorage，其它的一些特性也和localStorage相似。
- 現在Firefox只支持當前域下的globalStorage存儲， 如果使用公用域會導致一個這樣一個類似的錯誤“Security error” code: “1000”。
5、兼容性
| localStorage | 4 | 2 | 8 | 10.50 | 4 |
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
| globalStorage | -- | 2 | -- | -- | -- |
轉載于:https://www.cnblogs.com/wangli-66/p/5672724.html
總結
以上是生活随笔為你收集整理的HTML5 本地存储的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 遗传算法在JobShop中的应用研究（p
- 下一篇： Linux下源码安装CodeBlocks