html5中的localstorage有什么用-創(chuàng)新互聯(lián)

這篇“html5中的localstorage有什么用”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“html5中的localstorage有什么用”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過(guò)這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供隆安網(wǎng)站建設(shè)、隆安做網(wǎng)站、隆安網(wǎng)站設(shè)計(jì)、隆安網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、隆安企業(yè)網(wǎng)站模板建站服務(wù)，10多年隆安做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。 3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

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

HTML API

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

基本使用方法

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

作用域

html5中的localstorage有什么用

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

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

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

生存期

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

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

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

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

過(guò)期時(shí)間

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

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

容量限制

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

域名限制

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

異常處理

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

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

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

瀏覽器兼容性

html5中的localstorage有什么用

如何調(diào)試

html5中的localstorage有什么用

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

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

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

感謝你的閱讀，希望你對(duì)“html5中的localstorage有什么用”這一關(guān)鍵問(wèn)題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

新聞名稱：html5中的localstorage有什么用-創(chuàng)新互聯(lián)
本文來(lái)源：http://muchs.cn/article42/dshihc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站設(shè)計(jì)公司、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容