HTML5storage提供了一種方式讓網站能夠把資訊儲存到你本地的電腦上，並再以後需要的時候進行取得。這個概念和cookie相似，差異是它是為了更大容量儲存設計的。 Cookie的大小是受限的，並且每次你要求一個新的頁面的時候cookie都會被發送過去。 HTML5的storage是儲存在你的電腦上，網站在頁面載入後可以透過Javascript 來取得這些數據。
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
偵測值得變化，瀏覽器支援不好。
說明：
2、#localStorage
# #檢測
!!window.localStorage;
##!!window.localStorage;方法和sessionStorage
相同說明：
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
举例
//结合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."); } // 检测连接是否创建成功以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。
绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。
B、执行查询
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); }
);
});执行SQL语句使用database.transaction()函数，该函数只有一个参数，负责执行查询的函数。
该函数具有一个类型事务的参数（tx）。
该事务参数（tx）具有一个函数：executeSql()。这个函数使用四个参数：
表示查询的SQL字符串；插入到查询中问号所在处的字符串数据；一个成功时执行的函数；一个失败时执行的函数。
执行成功的函数有两个参数：tx2，事务性参数；result，执行的返回结果，结构如图
执行成功的函数也有两个参数：tx2，事务性参数；error，错误对象，结构如图
C、其它
Chrome支持； firefox（测试时版本4.01）不支持；IE8不支持。
D、示例
//创建数据库
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');
});4、globalStorage
这个也是html5中提出来，在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，localStorage一样，域中任何一个页面存储的信息都能被所有的页面共享
基本语法
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。
globalStorage['mozilla.org'] —— 在mozilla.org網域下面的所有網頁都可以透過這個命名空間儲存物件來進行讀取和寫入。
globalStorage['org'] —— 在.org網域下面的所有網頁都可以透過這個命名空間儲存物件來進行讀取和寫入。
globalStorage[''] —— 在任何網域下的任何網頁都可以透過這個命名空間儲存物件來進行讀取和寫入
方法屬性
setItem(key, 值) —— 設定或重設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、相容性
#方法 |
Chrome |
Firefox (Gecko) |
Internet Explorer |
#Opera |
|
| ##Safari (WebKit) | #localStorage | ##4 |
|||
| #2 | 8 | #10.50 | 4 | ||
| sessionStorage | #5 | 2 |
以上是html5本地儲存storage實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
