Example <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）。
下面我們要看一個例子：
程式碼如下:
程式碼如下:
程式碼如下:
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; }
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則是為了在本地「儲存」資料而生。
原始碼下載
