HTML5 storag存儲(chǔ)詳解

2020-03-24 18:58:39

字體：大中小

供稿：網(wǎng)友

本篇文章主要介紹HTML5 storag存儲(chǔ)詳解，感興趣的朋友參考下，希望對(duì)大家有所幫助。

HTML5storage提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到你本地的計(jì)算機(jī)上，并再以后需要的時(shí)候進(jìn)行獲取。這個(gè)概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。html' target='_blank'>Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候cookie都會(huì)被發(fā)送過(guò)去。HTML5的storage是存儲(chǔ)在你的計(jì)算機(jī)上，網(wǎng)站在頁(yè)面加載完畢后可以通過(guò)Javascript來(lái)獲取這些數(shù)據(jù)。

1、sessionStorage

檢測(cè)

!!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

檢測(cè)值得變化，瀏覽器支持不好。

說(shuō)明：

cookie的存儲(chǔ)限制在了4k之內(nèi)，相比來(lái)說(shuō)，session storage有了更大的存儲(chǔ)空間，但至于具體多大，這要參照瀏覽器廠商的具體實(shí)現(xiàn)。

cookie有一個(gè)機(jī)制，就是在每次客戶端請(qǐng)求服務(wù)器的時(shí)候都會(huì)將cookie發(fā)送給服務(wù)器，這無(wú)疑會(huì)做很多不必要的操作，因?yàn)椴⒉皇敲看握?qǐng)求服務(wù)器都需要cookie的所有信息，而session storage很好的解決了這個(gè)問(wèn)題，它不是采取自動(dòng)發(fā)送的方式，這樣就減少了不必要的工作。

通過(guò)sessionStorage所存儲(chǔ)數(shù)據(jù)的生命周期，和Session類似，關(guān)閉瀏覽器（或標(biāo)簽頁(yè)）后數(shù)據(jù)就不存在了。但刷新頁(yè)面或使用“前進(jìn)”、“后退按鈕”后sessionStorage仍然存在。

session storage每個(gè)窗口的值都是獨(dú)立的（每個(gè)窗口都有自己的數(shù)據(jù)），它的數(shù)據(jù)會(huì)隨著窗口的關(guān)閉而消失，窗口間的sessionStorage也是不可以共享的。

setItem中的key、value使用的是字符串的形式進(jìn)行存儲(chǔ)的。也就是說(shuō)如果有如下的代碼：setItem(‘count’, 1);通過(guò)getItem(‘count’) + 5 得到的將不是預(yù)期的6(整數(shù))，而是’16’(字符串)。

再次使用setItem設(shè)置已經(jīng)存在的key的value時(shí)，新的值將替代舊的值。

當(dāng)存儲(chǔ)中的數(shù)據(jù)發(fā)生改變時(shí)，會(huì)觸發(fā)相應(yīng)的事件（window.onstorage），但目前各瀏覽器對(duì)此事件的支持并不完善，暫時(shí)可以忽略。

2、localStorage

檢測(cè)

!!window.localStorage;

方法和sessionStorage相同

說(shuō)明：

local storage把只把數(shù)據(jù)存儲(chǔ)在了客戶端使用，不會(huì)發(fā)送的服務(wù)器上（除非你故意這樣做）。

而且對(duì)于某一個(gè)域下來(lái)說(shuō)，local storage是共享的（多個(gè)窗口共享一個(gè)“數(shù)據(jù)庫(kù)”）。

localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。

舉例

//結(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)成功建立，即使過(guò)去對(duì)于某個(gè)用戶它是成功的。為什么一個(gè)連接會(huì)失敗，存在多個(gè)原因。也許用戶代理出于安全原因拒絕你的訪問(wèn)，也許設(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); }  });

執(zhí)行SQL語(yǔ)句使用database.transaction()函數(shù)，該函數(shù)只有一個(gè)參數(shù)，負(fù)責(zé)執(zhí)行查詢的函數(shù)。

該函數(shù)具有一個(gè)類型事務(wù)的參數(shù)（tx）。

該事務(wù)參數(shù)（tx）具有一個(gè)函數(shù)：executeSql()。這個(gè)函數(shù)使用四個(gè)參數(shù)：
表示查詢的SQL字符串；插入到查詢中問(wèn)號(hào)所在處的字符串?dāng)?shù)據(jù)；一個(gè)成功時(shí)執(zhí)行的函數(shù)；一個(gè)失敗時(shí)執(zhí)行的函數(shù)。

執(zhí)行成功的函數(shù)有兩個(gè)參數(shù)：tx2，事務(wù)性參數(shù)；result，執(zhí)行的返回結(jié)果，結(jié)構(gòu)如圖

執(zhí)行成功的函數(shù)也有兩個(gè)參數(shù)：tx2，事務(wù)性參數(shù)；error，錯(cuò)誤對(duì)象，結(jié)構(gòu)如圖

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下面所有的子域都可以通過(guò)這個(gè)命名空間存儲(chǔ)對(duì)象來(lái)進(jìn)行讀和寫。

globalStorage[ mozilla.org ] —— 在mozilla.org域名下面的所有網(wǎng)頁(yè)都可以通過(guò)這個(gè)命名空間存儲(chǔ)對(duì)象來(lái)進(jìn)行讀和寫。

globalStorage[ org ] —— 在.org域名下面的所有網(wǎng)頁(yè)都可以通過(guò)這個(gè)命名空間存儲(chǔ)對(duì)象來(lái)進(jìn)行讀和寫。

globalStorage[ ] —— 在任何域名下的任何網(wǎng)頁(yè)都可以通過(guò)這個(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;