HTML API
localstorage 在瀏覽器的 API 有兩個：localStorage 和sessionStorage欠母，存在于 window 對象中：localStorage 對應 window.localStorage窗轩，sessionStorage 對應 window.sessionStorage亚兄。
localStorage 和 sessionStorage 的區(qū)別主要是在于其生存期。
基本使用方法
這里的
作用域指的是：如何隔離開不同頁面之間的localStorage（總不能在百度的頁面上能讀到騰訊的localStorage吧博敬，哈哈哈）墓陈。localStorage只要在相同的協(xié)議、相同的主機名磁奖、相同的端口下，就能讀取/修改到同一份localStorage數(shù)據(jù)某筐。sessionStorage比localStorage更嚴苛一點比搭，除了協(xié)議、主機名南誊、端口外身诺，還要求在同一窗口（也就是瀏覽器的標簽頁）下蜜托。
生存期
localStorage理論上來說是永久有效的，即不主動清空的話就不會消失霉赡，即使保存的數(shù)據(jù)超出了瀏覽器所規(guī)定的大小橄务，也不會把舊數(shù)據(jù)清空而只會報錯。但需要注意的是穴亏，在移動設備上的瀏覽器或各Native App用到的WebView里蜂挪，localStorage都是不可靠的，可能會因為各種原因（比如說退出App嗓化、網(wǎng)絡切換棠涮、內(nèi)存不足等原因）被清空。
sessionStorage的生存期顧名思義蟆湖，類似于session，只要關閉瀏覽器（也包括瀏覽器的標簽頁）玻粪，就會被清空隅津。由于sessionStorage的生存期太短，因此應用場景很有限劲室，但從另一方面來看伦仍，不容易出現(xiàn)異常情況，比較可靠很洋。
數(shù)據(jù)結構
localstorage為標準的鍵值對（Key-Value,簡稱KV）數(shù)據(jù)類型充蓝，簡單但也易擴展，只要以某種編碼方式把想要存儲進localstorage的對象給轉(zhuǎn)化成字符串喉磁，就能輕松支持谓苟。舉點例子：把對象轉(zhuǎn)換成json字符串，就能讓存儲對象了协怒；把圖片轉(zhuǎn)換成DataUrl（base64）涝焙，就可以存儲圖片了。另外對于鍵值對數(shù)據(jù)類型來說孕暇，"鍵是唯一的"這個特性也是相當重要的仑撞，重復以同一個鍵來賦值的話，會覆蓋上次的值妖滔。
過期時間
很遺憾隧哮，localstorage原生是不支持設置過期時間的，想要設置的話座舍，就只能自己來封裝一層邏輯來實現(xiàn)：
function set(key,value){ var curtime = new Date().getTime();//獲取當前時間 localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//轉(zhuǎn)換成json字符串序列 } function get(key,exp)//exp是設置的過期時間 { var val = localStorage.getItem(key);//獲取存儲的元素 var dataobj = JSON.parse(val);//解析出json對象 if(new Date().getTime() - dataobj.time > exp)//如果當前時間-減去存儲的元素在創(chuàng)建時候設置的時間 > 過期時間 { console.log("expires");//提示過期 } else{ console.log("val="+dataobj.val); } }
容量限制
目前業(yè)界基本上統(tǒng)一為5M沮翔，已經(jīng)比cookies的4K要大很多了，省著點用吧騷年曲秉。
域名限制
由于瀏覽器的安全策略鉴竭，localstorage是無法跨域的歧譬，也無法讓子域名繼承父域名的localstorage數(shù)據(jù)，這點跟cookies的差別還是蠻大的搏存。
異常處理
localstorage在目前的瀏覽器環(huán)境來說瑰步，還不是完全穩(wěn)定的，可能會出現(xiàn)各種各樣的bug璧眠，一定要考慮好異常處理缩焦。我個人認為localstorage只是資源本地化的一種優(yōu)化手段，不能因為使用localstorage就降低了程序的可用性责静，那種只是在console里輸出點錯誤信息的異常處理我是絕對反對的袁滥。localstorage的異常處理一般用try/catch來捕獲/處理異常。
如何測試用戶當前瀏覽器是否支持localstorage
目前普遍的做法是檢測window.localStorage是否存在灾螃，但某些瀏覽器存在bug题翻，雖然"支持"localstorage，但在實際過程中甚至可能出現(xiàn)無法setItem()這樣的低級bug腰鬼。因此我建議嵌赠，可以通過在try/catch結構里set/get一個測試數(shù)據(jù)有無出現(xiàn)異常來判斷該瀏覽器是否支持localstorage，當然測試完后記得刪掉測試數(shù)據(jù)哦熄赡。
瀏覽器兼容性
| Feature | Chrome | Firefox | Internet Explorer | Opera | Safari | Android | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| localStorage | 4 | 3.5 | 8 | 10.50 | 4 | 2.1 | 11 | iOS 3.2 |
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 | 2.1 | 11 | iOS 3.2 |
如何調(diào)試
在chrome開發(fā)者工具里的Resources - Local Storage面板以及Resources - Session Storage面板里姜挺，可以看到當前域名下的localstorage數(shù)據(jù)。
[圖片上傳失敗...(image-8443f6-1649756043745)]
在ios設備上無法重復setItem()
另外彼硫，在iPhone/iPad上有時設置setItem()時會出現(xiàn)詭異的QUOTA_EXCEEDED_ERR錯誤炊豪，這時一般在setItem之前，先removeItem()就ok了拧篮。
