什么是HTML5本地存儲(chǔ)技術(shù)，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)公司，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營(yíng)銷型網(wǎng)站制作、響應(yīng)式網(wǎng)站設(shè)計(jì)、展示型成都做網(wǎng)站、網(wǎng)站建設(shè)等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷推廣問題。

本地緩存是HTML5出現(xiàn)的新技術(shù)，這個(gè)技術(shù)的出現(xiàn)使得移動(dòng)web的開發(fā)成為了可能。我們都知道，要想打造一個(gè)高性能的移動(dòng)應(yīng)用，速度是關(guān)鍵。而在HTML5之前，只有cookie能夠存儲(chǔ)數(shù)據(jù)，大小只有4kb。這嚴(yán)重限制了應(yīng)用文件的存儲(chǔ)，導(dǎo)致web開發(fā)的移動(dòng)應(yīng)用程序需要較長(zhǎng)的加載時(shí)間。有了本地存儲(chǔ)，讓web移動(dòng)應(yīng)用能夠更接近原生。

瀏覽器中，本地存儲(chǔ)通過window.localStorage調(diào)用。判斷瀏覽器是否支持本地存儲(chǔ)的代碼如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. if(window.localStorage){     

2.  alert('This browser supports localStorage');     

3. }else{     

4.  alert('This browser does NOT supportlocalStorage');     

5. }     

如果我們要將數(shù)據(jù)存儲(chǔ)到本地，最簡(jiǎn)單的方法就是為window。localStorage添加一個(gè)屬性并為其賦值。例如我們要存儲(chǔ)一個(gè)數(shù)據(jù)name，它的值為Tom，就可以通過如下方式實(shí)現(xiàn)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. window.localStorage.name = “Tom”     

這里要注意字符串變量需要引號(hào)。當(dāng)我們想取出本地存儲(chǔ)中的數(shù)據(jù)市，可以利用getItem方法。整個(gè)代碼流程如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. var storage = window.localStorage;     

2. storage.name = “Tom”;     

3. //取出name數(shù)據(jù)    

4. var name1 = storage.getItem(“name”);     

5. alert(name1);     

這段代碼在Chrome瀏覽器控制臺(tái)中的顯示結(jié)果就是一個(gè)顯示Tom的提示框?？梢娢覀円呀?jīng)通過這種方式正確的進(jìn)行了數(shù)據(jù)的存儲(chǔ)與讀取。

如果我們想刪除這些存儲(chǔ)的數(shù)據(jù)，可以使用removeItem方法。在以上代碼中加入如下代碼：

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. storage.removeItem(“name”);     

這時(shí)當(dāng)我們?cè)俅蝍lert的時(shí)候?qū)@示null，因?yàn)檫@個(gè)數(shù)據(jù)已經(jīng)被清空了。

了解了一些基本的本地存儲(chǔ)用法和思想后，我們來(lái)系統(tǒng)的介紹一下本地存儲(chǔ)。

本地存儲(chǔ)分為三大類：localStorage/sessionStorage/本地?cái)?shù)據(jù)庫(kù)

localStorage和sessionStorage二者的用法、所包含的函數(shù)、調(diào)用方法等都是相同的，二者僅僅是含義不同。其中，localStorage所存儲(chǔ)的數(shù)據(jù)是長(zhǎng)期有效的，而sessionStorage所存儲(chǔ)的信息當(dāng)每個(gè)會(huì)話（session）關(guān)閉時(shí)就會(huì)銷毀（通俗的說(shuō)就是頁(yè)面關(guān)閉后數(shù)據(jù)自動(dòng)銷毀）。

由于二者的特性不同，因此應(yīng)用的場(chǎng)景也有很大區(qū)別。通常，當(dāng)我們需要存儲(chǔ)一些用戶配置項(xiàng)等一些需要長(zhǎng)時(shí)間存儲(chǔ)的數(shù)據(jù)信息時(shí)，需要使用localStorgae進(jìn)行保存，利用了其時(shí)效長(zhǎng)的特點(diǎn)。相應(yīng)的，當(dāng)我們需要實(shí)現(xiàn)類似購(gòu)物車等基于session的功能時(shí)，就需要使用sessionStorage。

由于localStorage和sessionStorage的用法相同，因此我們以localStorage為例，介紹二者的方法。

1、設(shè)置數(shù)據(jù)setItem
用法為localStorage.setItem(“key”, “value”)，表示將value值傳遞給key。(sessionStorage.setItem使用方法同理，下面不再一一介紹)

2、獲取數(shù)據(jù)getItem
用法為localStorage.getItem(“key”)，只要輸入相應(yīng)的key值，就可以從中取出對(duì)應(yīng)的value值。

3、刪除特定的數(shù)據(jù)removeItem
用法為localStorage.removeItem(key)，刪除key對(duì)應(yīng)的數(shù)據(jù)。

4、清空所有數(shù)據(jù)clear
用法為localStorage.clear()，表示清空所有存儲(chǔ)系統(tǒng)中的數(shù)據(jù)。

看完上述內(nèi)容，你們掌握什么是HTML5本地存儲(chǔ)技術(shù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！