html5指南-5.使用web storage存儲(chǔ)鍵值對(duì)的數(shù)據(jù)_HTML5教程

推薦：html5 Canvas畫(huà)圖教程(2)—畫(huà)直線與設(shè)置線條的樣式如顏色/端點(diǎn)/交匯點(diǎn)
在學(xué)畫(huà)畫(huà)的時(shí)候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此,接下來(lái)為您詳細(xì)介紹最簡(jiǎn)單的線條的畫(huà)法

本節(jié)課的內(nèi)容是介紹web storage，使用它在瀏覽器里存儲(chǔ)鍵值對(duì)的數(shù)據(jù)，功能上像以前的cookie一樣，不過(guò)他更好，存儲(chǔ)的數(shù)據(jù)可以更大。有兩種類型的web storage：local storage和session storage，他們使用相同的實(shí)現(xiàn)機(jī)制，只是可見(jiàn)性和生命周期不同。
1.使用local storage
我們使用localStorage對(duì)象來(lái)訪問(wèn)local storage，他返回Storage對(duì)象，Storage用來(lái)存儲(chǔ)鍵值對(duì)的數(shù)據(jù)，他有下面一些屬性和方法：
clear()：清楚存儲(chǔ)的鍵值對(duì)數(shù)據(jù)；
getItem(<key>)：通過(guò)key獲取value值；
key(<index>)：通過(guò)索引獲取key值；
length：返回鍵值對(duì)的個(gè)數(shù)；
removeItem(<key>)：通過(guò)key移出指定數(shù)據(jù)；
setItem(<key>,<value>)：添加一個(gè)鍵值對(duì)，當(dāng)指定key的鍵值對(duì)存在，則實(shí)現(xiàn)更新操作；
[<key>]：通過(guò)數(shù)組下標(biāo)的方式，使用key獲取指定value值。
Storage對(duì)象允許我們存儲(chǔ)key和value都是字符串形式的鍵值對(duì)數(shù)據(jù)，key是唯一的，意味著當(dāng)我們使用setItem方法添加鍵值對(duì)時(shí)，如果key值已經(jīng)存在的話，將實(shí)現(xiàn)更新的操作。我們來(lái)看下面的例子：

復(fù)制代碼代碼如下:hl5o.cn

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
body > *{float: left;}
table{border-collapse: collapse;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
input{border: thin solid black;padding: 2px;}
label{min-width: 50px;display: inline-block;text-align: right;}
#countmsg, #buttons{margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}
</style>
</head>
<body>
<div>
<div>
<label>Key:</label><input id="key" placeholder="Enter Key" /></div>
<div>
<label>Value:</label><input id="value" placeholder="Enter Value" /></div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">There are <span id="count"></span>items</p>
</div>
<table id="data" border="1">
<tr>
<th>Item Count:</th>
<td id="count">-</td>
</tr>
</table>
<script>
displayData();
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e) {
switch (e.target.id) {
case 'add':
var key = document.getElementById('key').value;
var value = document.getElementById('value').value;
localStorage.setItem(key, value);
break;
case 'clear':
localStorage.clear();
break;
}
displayData();
}
function displayData() {
var tableElement = document.getElementById('data');
tableElement.innerHTML = '';
var itemCount = localStorage.length;
document.getElementById('count').innerHTML = itemCount;
for (var i = 0; i < itemCount; i++) {
var key = localStorage.key(i);
var val = localStorage.getItem(key);
tableElement.innerHTML += '<tr><th>' + key + ':</th><td>' + val + '</td></tr>';
}
}
</script>
</body>
</html>

我們來(lái)看運(yùn)行結(jié)果：

瀏覽器不能刪除我們通過(guò)localStorage創(chuàng)建的數(shù)據(jù)，除非用戶刪除它。
2.監(jiān)聽(tīng)Storage事件
通過(guò)local storage存儲(chǔ)的數(shù)據(jù)對(duì)同源的文檔具有可見(jiàn)性，比如你打開(kāi)兩個(gè)chrome瀏覽器訪問(wèn)同一個(gè)url地址，在任何一個(gè)頁(yè)面上創(chuàng)建的local storage對(duì)另外一個(gè)頁(yè)面也是可見(jiàn)的。但是如果用別的瀏覽器（如firefox）打開(kāi)相同url地址，local storage是不可見(jiàn)的，因?yàn)樗麄儾煌戳�。Storage事件就是用來(lái)監(jiān)聽(tīng)storage的內(nèi)容發(fā)生改變的，下面我們看他包含哪些屬性：
key：返回發(fā)生改變的key值；
oldValue：返回發(fā)生改變key值以前的value值；
newValue：返回發(fā)生改變key值新的value值；
url：發(fā)生改變的url地址；
storageArea：返回發(fā)生改變的Storage對(duì)象（是local storage還是session storage）。
下面我們看個(gè)例子：

復(fù)制代碼代碼如下:hl5o.cn

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Storage</title> 
<style> 
table{border-collapse: collapse;} 
th, td{padding: 4px;} 
</style> 
</head> 
<body> 
<table id="data" border="1"> 
<tr> 
<th>key</th> 
<th>oldValue</th> 
<th>newValue</th> 
<th>url</th> 
<th>storageArea</th> 
</tr> 
</table> 
<script> 
var tableElement = document.getElementById('data'); 
window.onstorage = function (e) { 
var row = '<tr>'; 
row += '<td>' + e.key + '</td>'; 
row += '<td>' + e.oleValue + '</td>'; 
row += '<td>' + e.newValue + '</td>'; 
row += '<td>' + e.url + '</td>'; 
row += '<td>' + (e.storageArea == localStorage) + '</td></tr>'; 
tableElement.innerHTML += row; 
} 
</script> 
</body> 
</html> 

我們?cè)诶?中增刪改storage的數(shù)據(jù)，會(huì)在例2頁(yè)面上顯示出來(lái)。例2在chrome瀏覽器中運(yùn)行正常，firefox沒(méi)有反應(yīng)，其他瀏覽器沒(méi)有測(cè)試。
運(yùn)行結(jié)果：

3.使用session storage
session storage在使用上和local storage一樣，只是他的訪問(wèn)性上只限于當(dāng)前頁(yè)面，并且頁(yè)面關(guān)閉后會(huì)消失，我們通過(guò)sessionStorage來(lái)訪問(wèn)它。

復(fù)制代碼代碼如下:hl5o.cn

 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>Example</title> 
<style> 
body > *{float: left;} 
table{border-collapse: collapse;margin-left: 50px;} 
th, td{padding: 4px;} 
th{text-align: right;} 
input{border: thin solid black;padding: 2px;} 
label{min-width: 50px;display: inline-block;text-align: right;} 
#countmsg, #buttons{margin-left: 50px;margin-top: 5px;margin-bottom: 5px;} 
</style> 
</head> 
<body> 
<div> 
<div> 
<label>Key:</label><input id="key" placeholder="Enter Key" /></div> 
<div> 
<label>Value:</label><input id="value" placeholder="Enter Value" /></div> 
<div id="buttons"> 
<button id="add">Add</button> 
<button id="clear">Clear</button> 
</div> 
<p id="countmsg">There are <span id="count"></span>items</p> 
</div> 
<table id="data" border="1"> 
<tr> 
<th>Item Count:</th> 
<td id="count">-</td> 
</tr> 
</table> 
<iframe src="storage.html" width="500" height="175"></iframe> 
<script> 
displayData(); 
var buttons = document.getElementsByTagName("button"); 
for (var i = 0; i < buttons.length; i++) { 
buttons[i].onclick = handleButtonPress; 
} 
function handleButtonPress(e) { 
switch (e.target.id) { 
case 'add': 
var key = document.getElementById("key").value; 
var value = document.getElementById("value").value; 
sessionStorage.setItem(key, value); 
break; 
case 'clear': 
sessionStorage.clear(); 
break; 
} 
displayData(); 
} 
function displayData() { 
var tableElement = document.getElementById('data'); 
tableElement.innerHTML = ''; 
var itemCount = sessionStorage.length; 
document.getElementById('count').innerHTML = itemCount; 
for (var i = 0; i < itemCount; i++) { 
var key = sessionStorage.key(i); 
var val = sessionStorage.getItem(key); 
tableElement.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>"; 
} 
} 
</script> 
</body> 
</html> 

運(yùn)行效果：

你在例3中做任何修改，例2的頁(yè)面不會(huì)發(fā)生任何改變。
總結(jié)：　
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
web storage和cookie的區(qū)別：Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie，getCookie。還有，web storage每個(gè)域（包括子域）有獨(dú)立的存儲(chǔ)空間，各個(gè)存儲(chǔ)空間是完全獨(dú)立的，因此不會(huì)造成數(shù)據(jù)混亂。
但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。
源碼下載

分享：HTML5本地存儲(chǔ)之Database Storage應(yīng)用介紹
實(shí)際上，除了sessionStorage和localStorage外，HTML5還支持通過(guò)本地?cái)?shù)據(jù)庫(kù)進(jìn)行本地?cái)?shù)據(jù)存儲(chǔ)，HTML5采用的是"SQLLite"這種文件型數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)多集中在嵌入式設(shè)備上，熟悉IOS/Android開(kāi)發(fā)的同學(xué)，應(yīng)該對(duì)SQLLite數(shù)據(jù)庫(kù)比較熟悉

來(lái)源：未知/所屬分類：HTML5教程/更新時(shí)間：2013-04-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)HTML5教程：

HTML5教程Rss訂閱Div+Css教程搜索

HTML5教程推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索html5指南-5.使用web storage存儲(chǔ)鍵值對(duì)的數(shù)據(jù)
教程說(shuō)明：
HTML5教程-html5指南-5.使用web storage存儲(chǔ)鍵值對(duì)的數(shù)據(jù)。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

html5指南-5.使用web storage存儲(chǔ)鍵值對(duì)的數(shù)據(jù)_HTML5教程

HTML5教程Rss訂閱Div+Css教程搜索

HTML5教程推薦

猜你也喜歡看這些