html5本地儲存storage實例詳解
- 伊谢尔伦原創
- 2017-05-31 15:49:301736瀏覽
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
偵測值得變化，瀏覽器支援不好。
說明：
- #cookie的儲存限制在了4k之內，相較來說， session storage有了更大的儲存空間，但至於具體多大，這要參考瀏覽器廠商的具體實作。
- cookie有一個機制，就是在每次客戶端請求伺服器的時候都會將cookie發送給伺服器，這無疑會做很多不必要的操作，因為並不是每次請求伺服器都需要cookie的所有訊息，而session storage很好的解決了這個問題，它不是採取自動發送的方式，這樣就減少了不必要的工作。
- 透過sessionStorage所儲存資料的生命週期，和Session類似，關閉瀏覽器（或標籤頁）後資料就不存在了。但刷新頁面或使用「前進」、「後退按鈕」後sessionStorage仍然存在。
- session storage每個視窗的值都是獨立的（每個視窗都有自己的資料），它的資料會隨著視窗的關閉而消失，視窗間的sessionStorage也是不可以共享的。
- setItem中的key、value使用的是字串的形式進行儲存的。也就是說如果有如下的程式碼：setItem(‘count’, 1);透過getItem(‘count’) + 5 得到的將不是預期的6(整數)，而是’16’(字串)。
- 再次使用setItem設定已經存在的key的value時，新的值將會取代舊的值。
- 當儲存中的資料改變時，會觸發對應的事件（window.onstorage），但目前各瀏覽器對此事件的支援並不完善，暫時可以忽略。
2、#localStorage
# #檢測
!!window.localStorage;
##!!window.localStorage;方法和sessionStorage
相同說明：
- #local storage把只把資料儲存在了客戶端使用，不會發送的伺服器上（除非你故意這樣做）。
- ###而且對某一個網域下來說，local storage是共享的（多個視窗共用一個「資料庫」）。 ###
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中文網其他相關文章！