html5存儲數組

① 如何設置html5本地存儲

web存儲最初作為HTML5的一部分被定義成API形式，但是後來被剝離出來作為獨立的標准了。

web存儲表轉所描述的API包含localStorage對象和SessionStorage對象，這兩個對象實際上是持久化關聯數組，是名值對的映射表，「名」和「值」都是字元串。

例子：

varname=localStorage.username;//查詢一個儲存的值
name=localStorage["username"];//等價於數組表示法
if(!name){
name=prompt("whatisyourname?");
localStorage.username=name;
}
//迭代所有存儲的name/value對
for(varnameinlocalStorage){
varvalue=localStorage[name];
}

② HTML5的local storage存儲的數據到底存到哪去了

基本使用方法如下：localStorage.name = "k1w1"; 這樣的話，你的本地磁碟中就會有個資料庫存下了這個數據。我無法接受數據寫到了我的本地磁碟而我找不到它的確切位置，於是通過尋找發現：Chrome 的存儲方式是以sqlite的資料庫文件形式存儲。存在C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中，雖然後綴名是.localstorege 但是實際上就是sqlite的資料庫文件，可以用sqlite打開，並看到其中的數據。這么蛋疼的找它存在哪裡是因為我想刪掉在學習使用local storage時產生的一些垃圾數據，有點電腦潔癖。就像當初我喜歡選擇性刪除cookies一樣。Firefox存在哪裡暫時沒有找到，感覺像是被加了密的sqlite資料庫文件（這樣的話firefox的安全性就高一些了），不過我每次關掉firefox它都會自動刪掉所有瀏覽數據，所以也暫時不想找它存在哪了。

③ html5怎麼把數據當對象的屬性存在數組裡面

先放進去，然後再用自定義的比較器進行排序就可以了，Collections裡面的sort(List
list,
Comparator
?
super
T
c)方法

④ HTML5怎麼將對象數組寫入INDEXEDDB

IndexedDB是HTML5-WebStorage的重要一環，是一種輕量級NOSQL資料庫;一個網站可能有一個或多個 IndexedDB 資料庫，每個資料庫必須具有惟一的名稱。一個資料庫可包含一個或多個對象存儲。一個對象存儲（由一個名稱惟一標識）是一個記錄集合。每個記錄有一個鍵 和一個值。該值是一個對象，可擁有一個或多個屬性。鍵可能基於某個鍵生成器，從一個鍵路徑衍生出來，或者是顯式設置。一個鍵生成器自動生成惟一的連續正整數。鍵路徑定義了鍵值的路徑。它可以是單個 javaScript 標識符或多個由句點分隔的標識符

⑤ HTML5本地資料庫存儲數據代碼相關問題

一個網站如何能在客戶的瀏覽器存儲更多的數據呢？

在Html4的時代在瀏覽器端存儲點網站個性化的數據，尤其是用戶瀏覽器的痕跡，用戶的相關數據等一般只能存儲在Cookie中，但是大多是瀏覽器對於Cookie的限制也就逼迫網站存儲數據盡量精簡，想存儲復雜的、關系型的用戶數據就根本不可能了。但是進入Html5時代，這一切都不叫事...

一、本地存儲由來的背景

眾所周知Html4時代Cookie的大小、格式、存儲數據格式等限制，網站應用如果想在瀏覽器端存儲用戶的部分信息，那麼只能藉助於Cookie。但是Cookie的這些限制，也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據，復雜的數據就更別扯了。

下面是Cookie的限制：

• 1, 大多數瀏覽器支持最大為 4096 位元組的 Cookie。

• 2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只允許每個站點存儲 20 個 Cookie；如果試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。

• 3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數作出絕對限制，通常為 300 個。

• 4, Cookie默認情況都會隨著Http請求發送到後台伺服器，但並不是所有請求都需要Cookie的，比如：js、css、圖片等請求則不需要cookie。

Html5的設計者們，一開始就為Html5能成為富客戶端做好了准備。為了破解Cookie的一系列限制，Html5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器，而且支持復雜的本地資料庫，讓JS簡直就是逆天了。Html5支持兩種的WebStorage，一種是永久性的本地存儲（localStorage），另外一種是會話級別的本地存儲（sessionStorage）。

二、會話級別的本地存儲：sessionStorage

在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數據首先是Key-Value形式的，另外就是它跟瀏覽器當前會話相關，當會話結束後，數據會自動清除，跟未設置過期時間的Cookie類似。

sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• sessionStorage.setItem("demokey", "hek.com");


• //通過key來獲取value


• var dt = sessionStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //sessionStorage.clear();


• alert(sessionStorage.length);


• </script>





對於JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發輔助工具，非常簡單F12快捷鍵就立即打開工具了，包括IE也是這個快捷鍵。通過下圖就可以查看當前瀏覽器中的sessionStorage數據。




參考在線演示demo

三、永久本地存儲：localStorage

在最新的JS的API中增加了localStorage對象，以便於用戶存儲永久存儲的Web端的數據。而且數據不會隨著Http請求發送到後台伺服器，而且存儲數據的大小機會不用考慮，因為在HTML5的標准中要求瀏覽器至少要支持到4MB.所以，這完全是顛覆了Cookie的限制，為Web應用在本地存儲復雜的用戶痕跡數據提供非常方便的技術支持。那接下里分別介紹一下localStorage的常用的方法，當然基本上跟sessionStorage是一致的。

localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• localStorage.setItem("demokey", "httpcom");


• //通過key來獲取value


• var dt = localStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //localStorage.clear();


• alert(localStorage.length);


• </script>



四、逆天了本地資料庫

雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供存儲簡單數據結構的數據，對於復雜的Web應用的數據卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支持，允許我們直接通JS的API在瀏覽器端創建一個本地的資料庫，而且支持標準的SQL的CRUD操作，讓離線的Web應用更加方便的存儲結構化的數據。接下里介紹一下本地數據的相關API和用法。

操作本地資料庫的最基本的步驟是：

• 第一步：openDatabase方法：創建一個訪問資料庫的對象。

• 第二步：使用第一步創建的資料庫訪問對象來執行transaction方法，通過此方法可以設置一個開啟事務成功的事件響應方法，在事件響應方法中可以執行SQL.

• 第三步：通過executeSql方法執行查詢，當然查詢可以是：CRUD。

接下來分別介紹一下相關的方法的參數和用法。

（1）openDatabase方法：

• //Demo：獲取或者創建一個資料庫，如果資料庫不存在那麼創建之


• var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });



openDatabase方法打開一個已經存在的資料庫，如果資料庫不存在，它還可以創建資料庫。幾個參數意義分別是：

• 1，資料庫名稱。

• 2，資料庫的版本號，目前來說傳個1.0就可以了，當然可以不填；

• 3，對資料庫的描述。

• 4，設置分配的資料庫的大小（單位是kb）。

• 5，回調函數(可省略)。

• 初次調用時創建資料庫，以後就是建立連接了。

（2）db.transaction方法可以設置一個回調函數，此函數可以接受一個參數就是我們開啟的事務的對象。然後通過此對象可以進行執行Sql腳本，跟下面的步驟可以結合起來。

（3）通過executeSql方法執行查詢。

• ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)



參數說明：

• qlQuery：需要具體執行的sql語句，可以是create、select、update、delete；

• value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將s>語句中所要使用的參數先用「?」代替，然後依次將這些參數組成數組放在第二個參數中

• ataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集；

• 4,errorHandler：執行失敗時調用的回調函數；

⑥ HTML5存儲類型有什麼區別

1.本地存儲localstorage
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
2.本地存儲sessionstorage
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。
3.離線緩存（application cache）
本地緩存應用所需的文件
使用方法：
①配置manifest文件
4.Web SQL
關系資料庫，通過SQL語句訪問
Web SQL 資料庫 API 並不是 HTML5 規范的一部分，但是它是一個獨立的規范，引入了一組使用 SQL 操作客戶端資料庫的 APIs。
5.IndexedDB
索引資料庫 (IndexedDB) API（作為 HTML5 的一部分）對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。同時它還有助於本地緩存數據，使傳統在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。

⑦ html5 本地存儲有多少種方案

html5 本地存儲有五種方案。
1、LocalStorage
LocalStorage就是Key-Value的簡單鍵值對存儲結構，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，一般情況下localStorage較為常用，示例代碼如下：
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
2、Cookie
這種存儲方式存儲內容很有限，只適合做簡單信息存儲，存取介面設計得極其反人類，舉例如下：
function getCookieValue(name) {
if (document.cookie.length > 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
3、Indexed Database API
IndexedDB可以存儲結構對象，可構建key和index的索引方式查找，目前各瀏覽器的已經逐漸支持IndexedDB的存儲方式，其使用代碼如下，需注意IndexedDB的很多操作介面類似NodeJS的非同步回調方式，特別是查詢時連cursor的continue都是非同步再次回調onsuccess函數的操作方式，因此和NodeJS一樣使用上不如同步的代碼容易。
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
4、FileSystem API
FileSystem API相當於操作本地文件的存儲方式，目前支持瀏覽器不多，其介面標准也在發展制定變化中，因此也可以動態生成圖片到本地文件，然後通過 filesystem:http:*** 的URL方式直接賦值給img的html元素的src訪問。
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
5、Application Cache
window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用於查看緩存的當前狀態：
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};

⑧ HTML5本地存儲機制是怎樣的

HTML5 是下一代 HTML 標准，開始吸引越來越多人的目光。HTML5 的 DOM Storage 機制提供了一種方式讓程序員能夠把信息存儲到本地的計算機上，在需要時獲取。這點和 cookie 相似，區別是 DOM Storage 提供了更大容量的存儲空間。
目前，在客戶端保存數據使用最多的是 cookie，但 cookie 的大小上限為 4KB，並且每次請求一個新頁面時 cookie 都會被發送過去。更多的存儲空間需要瀏覽器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要額外安裝插件的 Google Gears 和 Flash。現在，HTML5 提供了一種標準的介面，使程序員可以簡單地訪問存儲的數據。由於鍵值對存儲在本地計算機上，在頁面載入完畢後可以通過 JavaScript 來操作這些數據。
HTML5 的建議是每個網站提供給 Storage 的空間是 5MB，一般來說足夠存字元串。如果存入的數據太大，有些瀏覽器如 Chrome 會拋出 QUOTA_EXCEEDED_ERR 異常。所以雖然 DOM Storage 提供的空間比 cookie 要大很多，但在使用需要注意限制。
安全性
一般不要在客戶端存儲敏感的信息，使用 localStorage、globalStorage 等在客戶端存儲的信息都非常容易暴露。應該在完成數據存儲後使用 clear 或者 removeItem 方法清除保存在 Storage 對象中的數據。
存儲事件驅動
如果想在存儲成功或修改存儲的值時執行一些操作，可以用 DOM Storage 介面提供的事件。

⑨ html5中web存儲只能存儲兩列數據嗎只有key 和value嗎可不可以是key，value，password求解答

value可以保存任何對象，你序列化一下，就可以了。

value可以保存任何對象，你序列化一下，就可以了。

value可以保存任何對象，你序列化一下，就可以了。

⑩ 介紹HTML5幾種存儲方式

HTML5 提供了兩種在客戶端存儲數據的新方法：..兩者都是僅在客戶端（即瀏覽器）中保存，不參與和伺服器的通信；
localStorage - 沒有時間限制的數據存儲,第二天、第二周或下一年之後，數據依然可用。
如何創建和訪問 localStorage：

<scripttype="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

下面的例子對用戶訪問頁面的次數進行計數：

<scripttype="text/javascript">
if(localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount)+1;
}
else{
localStorage.pagecount=1;
}
document.write("Visits"+localStorage.pagecount+"time(s).");
</script>

sessionStorage - 針對一個 session 的數據存儲,當用戶關閉瀏覽器窗口後，數據會被刪除。
創建並訪問一個 sessionStorage：

<scripttype="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

下面的例子對用戶在當前 session 中訪問頁面的次數進行計數：

<scripttype="text/javascript">
if(sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}
else{
sessionStorage.pagecount=1;
}
document.write("Visits"+sessionStorage.pagecount+"time(s)thissession.");
</script>

sessionStorage 、localStorage的區別
共同點：都是保存在瀏覽器端，且同源的。
區別：數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。