本地存储localStorage
我們可以通過全局屬性localStorage訪問本地存儲功能，該屬性返回一個Storage對象，Storage對象用來保存鍵/值形式的字符串對象
Storage對象有如下屬性和方法:
Storage對象可以用來保存鍵/值對，之中鍵和值都必須是字符串鍵必須是唯一的，這意味著如果我們用Storage對象中的setItem方法設置相同的鍵名的鍵/值對，后面一個會覆蓋掉前面一個，事實上就是后面一個更新了已經存在的鍵的值。
localStorage案例1(localStorage.html):
<!doctype html> <html> <head> <meta charset="utf-8"> <title>localStorage</title> <style></style> </head><body> <ul><li>key:<input id="key" type="text" value=""></li><li>value:<input id="value" type="text" value=""></li><li><input id="add" type="button" value="add"><input id="clear" type="button" value="clear"></li><li id="countmsg">There are <span id="count"></span> items</li> </ul> <table id="data"></table> <script>displayData();document.getElementById('add').onclick=handleButtonPress;document.getElementById('clear').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();}displayData();}function displayData() {var tableItem = document.getElementById('data');tableItem.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[key];tableItem.innerHTML+='<tr<th>'+key+'</th><td>'+val+'</td></tr>';}} </script> </body> </html>預覽效果:
該案例，當點擊add按鈕時會將數據添加到本地存儲中，當按下clear按鈕時則清除本地存儲中的內容;
在未清除的情況下，我們在相同的瀏覽器下訪問上面的案例，可以看到刷新瀏覽器數據還是存在的，關閉瀏覽器重新訪問上面的案例數據一樣的還是存在的。同源文檔(下面說的所有同源文檔都是在相同瀏覽器下訪問的指協議域名ip相同的頁面)也可以訪問上面案例所存儲的數據
瀏覽器不會刪除我們用localStorage添加的數據(永久存儲),除非用戶自己清楚瀏覽器。(規范還允許數據因為安全原因被移除，但并沒有說明什么樣的安全原因需要刪除本地數據)
監聽存儲事件
通過本地存儲功能保存的數據對所有來源相同的文檔都是可用的，某個文檔對本地存儲進行修改會觸發storage事件，我們可以監聽其他同源文檔上的這個事件來確保我們跟上最新變化，
與storage事件同時指派的對象是一個StorageEvent對象，它的成員如下表:
如下案例會監聽并編錄本地存儲對象上觸發的事件(storage.html):
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body> <table id="data"><tr><th>key</th><th>oldValue</th><th>newValue</th><th>url</th><th>storageArea</th></tr> </table> <script>var tableItem=document.getElementById('data');window.onstorage=handleStorage;function handleStorage(e) {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>';tableItem.innerHTML+=row;} </script> </body> </html>在相同的瀏覽器下同時訪問上面兩個案例時，在第一個案例每添加或者修改或者clear，都會立馬在第二案例中展現出來，注意不能刷新第二案例的，否則第二個案例會無數據。
注意: storage事件不會在制造變化的文檔內指派，只在其他同源文檔里可用。
總結
以上是生活随笔為你收集整理的本地存储localStorage的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 本地存储localStorage用法详解
- 下一篇： selenium之如何使用cssSele