我們可以通過全局屬性localStorage訪問本地存儲功能，該屬性返回一個Storage對象，Storage對象用來保存鍵/值形式的字符串對象
Storage對象有如下屬性和方法：
Storage對象可以用來保存鍵/值對，其中鍵和值都必須是字符串。鍵必須是唯一的，這意味着如果我們用Storage對象中的setItem方法設置相同的鍵名的鍵/值對，后面一個會覆蓋掉前面一個，事實上就是后面一個更新了已經存在的鍵的的值。
localStorage案例1（localStorage.html）：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>localStorage</title> 6 <style> 7 8 </style> 9 </head> 10 11 <body> 12 <ul> 13 <li>key:<input id="key" type="text" value=""></li> 14 <li>value:<input id="value" type="text" value=""></li> 15 <li> 16 <input id="add" type="button" value="add"> 17 <input id="clear" type="button" value="clear"> 18 </li> 19 <li id="countmsg">There are <span id="count"></span> items</li> 20 </ul> 21 <table id="data"></table> 22 <script> 23 displayData(); 24 document.getElementById('add').onclick=handleButtonPress; 25 document.getElementById('clear').onclick=handleButtonPress; 26 function handleButtonPress(e){ 27 switch(e.target.id){ 28 case 'add': 29 var key=document.getElementById('key').value; 30 var value=document.getElementById('value').value; 31 localStorage.setItem(key,value); 32 break; 33 case 'clear': 34 localStorage.clear(); 35 } 36 displayData(); 37 } 38 function displayData(){ 39 var tableItem=document.getElementById('data'); 40 tableItem.innerHTML=''; 41 var itemCount=localStorage.length; 42 document.getElementById('count').innerHTML=itemCount; 43 for(var i=0;i<itemCount;i++){ 44 var key=localStorage.key(i); 45 var val=localStorage[key]; 46 tableItem.innerHTML+='<tr><th>'+key+'</th><td>'+val+'</td></tr>'; 47 } 48 } 49 </script> 50 </body> 51 </html>
預覽效果：
該案例，當點擊add按鈕時會將數據添加到本地存儲中，當按下clear按鈕時則清楚本地存儲中的內容；
在未清除的情況下，我們在相同的瀏覽器下訪問上面的案例，可以看到刷新瀏覽器數據還是存在的，關閉瀏覽器后從新訪問上面的案例數據一樣的還是存在的。同源文檔（下面說的所有同源文檔都是在相同瀏覽器下訪問的指協議域名ip相同的頁面）也可以訪問上面案例所存儲的數據
瀏覽器不會刪除我們用localStorage添加的數據（永久存儲），除非用戶自己清除瀏覽器。（規范還允許數據因為安全原因被移除，但並沒有說明什么樣的安全原因需要刪除本地數據）
監聽存儲事件
通過本地存儲功能保存的數據對所有來源相同的文檔都是可用的，某個文檔對本地存儲進行修改會觸發storage事件，我們可以監聽其他同源文檔上的這個事件來確保我們跟上最新變化，
與storage事件同時指派的對象是一個StorageEvent對象，它的成員如下表：
如下案例會監聽並編錄本地存儲對象上觸發的事件（storage.html）：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table id="data"> 9 <tr> 10 <th>key</th> 11 <th>oldValue</th> 12 <th>newValue</th> 13 <th>url</th> 14 <th>storageArea</th> 15 </tr> 16 </table> 17 <script> 18 var tableItem=document.getElementById('data'); 19 window.onstorage=handleStorage; 20 function handleStorage(e){ 21 var row='<tr><td>'+ e.key+'</td><td>'+ e.oldValue+'</td><td>'+ e.newValue+'</td><td>'+ e.url+'</td><td>'+(e.storageArea==localStorage)+'</td></tr>'; 22 tableItem.innerHTML+=row; 23 } 24 </script> 25 </body> 26 </html>
在相同的瀏覽器下同時訪問上面兩個案例時，在第一個案例每添加或者修改或者clear，都會立馬在第二案例中展現出來，注意不能刷新第二案例的，否則第二個案例會無數據。
注意storage事件不會在制造變化的文檔內指派，只在其他同源文檔里可用