這篇文章將為大家詳細(xì)講解有關(guān)html5中l(wèi)ocalstorage是什么，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有宕昌免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

HTML API

localstorage在瀏覽器的API有兩個：localStorage和sessionStorage，存在于window對象中：localStorage對應(yīng)window.localStorage，sessionStorage對應(yīng)window.sessionStorage。

localStorage和sessionStorage的區(qū)別主要是在于其生存期。

基本使用方法

localStorage.setItem("b","isaac");//設(shè)置b為"isaac"
var b = localStorage.getItem("b");//獲取b的值,為"isaac"
var a = localStorage.key(0); // 獲取第0個數(shù)據(jù)項(xiàng)的鍵名，此處即為“b”
localStorage.removeItem("b");//清除b的值
localStorage.clear();//清除當(dāng)前域名下的所有l(wèi)ocalstorage數(shù)據(jù)

作用域

這里的作用域指的是：如何隔離開不同頁面之間的localStorage（總不能在百度的頁面上能讀到騰訊的localStorage吧，哈哈哈）。

localStorage只要在相同的協(xié)議、相同的主機(jī)名、相同的端口下，就能讀取/修改到同一份localStorage數(shù)據(jù)。

sessionStorage比localStorage更嚴(yán)苛一點(diǎn)，除了協(xié)議、主機(jī)名、端口外，還要求在同一窗口（也就是瀏覽器的標(biāo)簽頁）下。

生存期

localStorage理論上來說是永久有效的，即不主動清空的話就不會消失，即使保存的數(shù)據(jù)超出了瀏覽器所規(guī)定的大小，也不會把舊數(shù)據(jù)清空而只會報(bào)錯。但需要注意的是，在移動設(shè)備上的瀏覽器或各Native App用到的WebView里，localStorage都是不可靠的，可能會因?yàn)楦鞣N原因（比如說退出App、網(wǎng)絡(luò)切換、內(nèi)存不足等原因）被清空。

sessionStorage的生存期顧名思義，類似于session，只要關(guān)閉瀏覽器（也包括瀏覽器的標(biāo)簽頁），就會被清空。由于sessionStorage的生存期太短，因此應(yīng)用場景很有限，但從另一方面來看，不容易出現(xiàn)異常情況，比較可靠。

數(shù)據(jù)結(jié)構(gòu)

localstorage為標(biāo)準(zhǔn)的鍵值對（Key-Value,簡稱KV）數(shù)據(jù)類型，簡單但也易擴(kuò)展，只要以某種編碼方式把想要存儲進(jìn)localstorage的對象給轉(zhuǎn)化成字符串，就能輕松支持。舉點(diǎn)例子：把對象轉(zhuǎn)換成json字符串，就能讓存儲對象了；把圖片轉(zhuǎn)換成DataUrl（base64），就可以存儲圖片了。另外對于鍵值對數(shù)據(jù)類型來說，“鍵是的”這個特性也是相當(dāng)重要的，重復(fù)以同一個鍵來賦值的話，會覆蓋上次的值。

過期時間

很遺憾，localstorage原生是不支持設(shè)置過期時間的，想要設(shè)置的話，就只能自己來封裝一層邏輯來實(shí)現(xiàn)：

function set(key,value){
  var curtime = new Date().getTime();//獲取當(dāng)前時間
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//轉(zhuǎn)換成json字符串序列
}
function get(key,exp)//exp是設(shè)置的過期時間
{
  var val = localStorage.getItem(key);//獲取存儲的元素
  var dataobj = JSON.parse(val);//解析出json對象
  if(new Date().getTime() - dataobj.time > exp)//如果當(dāng)前時間-減去存儲的元素在創(chuàng)建時候設(shè)置的時間 > 過期時間
  {
    console.log("expires");//提示過期
  }
  else{
    console.log("val="+dataobj.val);
  }
}

容量限制

目前業(yè)界基本上統(tǒng)一為5M，已經(jīng)比cookies的4K要大很多了，省著點(diǎn)用吧騷年。

域名限制

由于瀏覽器的安全策略，localstorage是無法跨域的，也無法讓子域名繼承父域名的localstorage數(shù)據(jù)，這點(diǎn)跟cookies的差別還是蠻大的。

異常處理

localstorage在目前的瀏覽器環(huán)境來說，還不是完全穩(wěn)定的，可能會出現(xiàn)各種各樣的bug，一定要考慮好異常處理。我個人認(rèn)為localstorage只是資源本地化的一種優(yōu)化手段，不能因?yàn)槭褂胠ocalstorage就降低了程序的可用性，那種只是在console里輸出點(diǎn)錯誤信息的異常處理我是絕對反對的。localstorage的異常處理一般用try/catch來捕獲/處理異常。

如何測試用戶當(dāng)前瀏覽器是否支持localstorage

目前普遍的做法是檢測window.localStorage是否存在，但某些瀏覽器存在bug，雖然“支持”localstorage，但在實(shí)際過程中甚至可能出現(xiàn)無法setItem()這樣的低級bug。因此我建議，可以通過在try/catch結(jié)構(gòu)里set/get一個測試數(shù)據(jù)有無出現(xiàn)異常來判斷該瀏覽器是否支持localstorage，當(dāng)然測試完后記得刪掉測試數(shù)據(jù)哦。

瀏覽器兼容性

如何調(diào)試

在chrome開發(fā)者工具里的Resources - Local Storage面板以及Resources - Session Storage面板里，可以看到當(dāng)前域名下的localstorage數(shù)據(jù)。

在ios設(shè)備上無法重復(fù)setItem()

另外，在iPhone/iPad上有時設(shè)置setItem()時會出現(xiàn)詭異的QUOTA_EXCEEDED_ERR錯誤，這時一般在setItem之前，先removeItem()就ok了。

關(guān)于“html5中l(wèi)ocalstorage是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文標(biāo)題：html5中l(wèi)ocalstorage是什么-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/eohio.html