html5指南-5.使用web storage儲存鍵值對的資料_html5教學技巧

本課的內容是介紹web storage，使用它在瀏覽器裡存儲鍵值對的數據，功能上像以前的cookie一樣，不過他更好，存儲的數據可以更大。有兩種類型的web storage：local storage和session storage，他們使用相同的實作機制，只是可見性和生命週期不同。
1.使用local storage
我們使用localStorage對象來存取local storage，他返回Storage對象，Storage用來儲存鍵值對的數據，他有下面一些屬性和方法：
clear()：清楚儲存的鍵值對資料；
getItem()：透過key 取得value值；
key()：透過索引取得key值；
length ：傳回鍵值對的個數；
removeItem()：透過key移出指定資料；
setItem(,)：新增一個鍵值對，當指定key的鍵值對存在，則實作更新操作；
[]：透過陣列下標的方式，使用key取得指定value值。
Storage物件允許我們儲存key和value都是字串形式的鍵值對數據，key是唯一的，意味著當我們使用setItem方法添加鍵值對時，如果key值已經存在的話，將實現更新的操作。我們來看下面的例子：

複製代碼

代碼如下:

Key:

Value:

Add
Clear

There are items

Item Count:	-

<script> <br />displayData(); <br />var buttons = document.getElementsByTagName('button'); <br />for (var i = 0; i < buttons.length; i ) { <br />buttons[i].onclick = handleButtonPress; <br />} <br />function handleButtonPress(e) { <br />switch (e.target.id) { <br /> 'case ' >var key = document.getElementById('key').value; <br />var value = document.getElementById('value').value; <br />localStorage.setItem(key, value); <br />break; <>break; 🎜>case 'clear': <br />localStorage.clear(); <br />break; <br />} <br />displayData(); <br />} <br />function displayData() { <br />var tableElement = document.getElementById('data'); <br />tableElement.innerHTML = ''; <br />var itemCount = localStorage.length; <br />document.getElementById('count').innerHTML = itemCountfor; var i = 0; i < itemCount; i ) { <br />var key = localStorage.key(i); <br />var val = localStorage.getItem(key); <br />tableElement.innerHTML = '<tr>< th>' key ':<td>' val ''; <br />} <br />} <br /></script>




我們來看運行結果：

瀏覽器不能刪除我們透過localStorage建立的數據，除非使用者刪除它。
2.監聽Storage事件
透過local storage儲存的資料對同源的文件具有可見性，例如你開啟兩個chrome瀏覽器存取同一個url位址，在任何一個頁面上建立的local storage對另外一個頁面也是可見的。但如果用別的瀏覽器（如firefox）開啟相同url位址，local storage是看不見的，因為他們不同來源了。 Storage事件就是用來監聽storage的內容改變的，下面我們看他包含哪些屬性：
key：返回發生改變的key值；
oldValue：回傳發生改變key值以前的value值；
newValue：回傳發生改變key值新的value值；
url：改變發生的url位址；
storageArea：傳回已改變的Storage物件（是local storage還是session storage）。
下面我們要看一個例子：

複製程式碼

程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下:

key	oldValue	newValue	url	storageArea

<script> <br />var tableElement = document.getElementById('data'); </script>

window.onstorage = function (e ) {
var row = '';
row = '' e.key ''; row = '' e.oleValue ' td>'; row = ' ' e.newValue '';
row = '' e.url '';

row = '

' (e.storageArea == localStorage) ' '; tableElement.innerHTML = row; }

我們在例1中增刪改storage的數據，會在例2頁上顯示出來。範例2在chrome瀏覽器中運作正常，firefox沒有反應，其他瀏覽器沒有測試。 運行結果：

3.使用session storage session storage在使用上和local storage一樣，只是他的訪問性上只限於當前頁面，並且頁面關閉後會消失，我們通過sessionStorage來訪問它。 複製程式碼程式碼如下:

;


範例標題>

身體> *{float: left;}
table{border-collapse:collapse;margin-left: 50px;}
th, td{padding: 4px;}
th{text-align: right;}
輸入{邊框：細實黑；填滿：2px；}
標籤{最小寬度：50px；顯示：內聯塊；文字對齊：右；}
#countmsg，#buttons{margin-左：50px；上邊距：5px；下邊距：5px;}
;
頭>

;

;
鍵：

;
值：

新增按鈕>
清除按鈕>

有項目

第項計數：第>項
- td>

表>


顯示資料();
var Buttons = document.getElementsByTagName("button");
for (var i = 0; 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);
休息；
case 'clear':
sessionStorage. clear();
休息；
}
displayData();
}
function displayData() {
var tableElement = document.getElementById('data');
var tableElement = document.getElementById('data');
tableElement.innerHTML = '';
var itemCount = sessionStorage.length;
document.getElementById('count').innerHTML = itemCount;
for (var i = 0; i var key = sessionStorage.key(i);
var val = sessionStorage.getItem(key);
tableElement.innerHTML = " " 鍵「： ” val " ";
}
}
腳本>
身體>

運行效果
：

你在例3做任何修改，例2的頁面不會有任何改變。 總結
：
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問，並且當會話結束後數據也強制採集。 sessionStorage 不是持久化的本機存儲，會話對應層級的儲存。
localStorage 用於持久化的存儲本地存儲，除非主動刪除數據，否則數據是永遠不會過渡的。
web storage和cookie的區別：Web Storage的概念和cookie類似，區別是它是為了更大容量儲存設計的。 Cookie的大小是成立的，而且每次你​​要求一個新頁面的時候Cookie都會被發送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，而不是cookie需要前端開發者自行封裝setCookie，getCookie。還有，web storage每個域（包括子域）都有獨立的儲存空間，各個空間是完全獨立的
但是Cookie也不能或缺的：Cookie的作用是與伺服器進行交互，作為HTTP規範的一部分而存在，而Web Storage則是為了在本地「儲存」資料而生。 原始碼下載