談一談HTML5本地存儲技術(shù)

2020-03-24 17:55:06

字體：大中小

供稿：網(wǎng)友

本地緩存是HTML5出現(xiàn)的新技術(shù)，這個技術(shù)的出現(xiàn)使得移動web的開發(fā)成為了可能。我們都知道，要想打造一個高性能的移動應(yīng)用，速度是關(guān)鍵。而在HTML5之前，只有cookie能夠存儲數(shù)據(jù)，大小只有4kb。這嚴(yán)重限制了應(yīng)用文件的存儲，導(dǎo)致web開發(fā)的移動html' target='_blank'>應(yīng)用程序需要較長的加載時間。有了本地存儲，讓web移動應(yīng)用能夠更接近原生。瀏覽器中，本地存儲通過window.localStorage調(diào)用。判斷瀏覽器是否支持本地存儲的代碼如下：XML/HTML Code復(fù)制內(nèi)容到剪貼板
if(window.localStorage){ alert('ThisbrowsersupportslocalStorage'); }else{ alert('ThisbrowserdoesNOTsupportlocalStorage'); }
如果我們要將數(shù)據(jù)存儲到本地，最簡單的方法就是為window。localStorage添加一個屬性并為其賦值。例如我們要存儲一個數(shù)據(jù)name，它的值為Tom，就可以通過如下方式實現(xiàn)：XML/HTML Code復(fù)制內(nèi)容到剪貼板
這里要注意字符串變量需要引號。當(dāng)我們想取出本地存儲中的數(shù)據(jù)市，可以利用getItem方法。整個代碼流程如下：JavaScript Code復(fù)制內(nèi)容到剪貼板
varstorage=window.localStorage; storage.name= Tom //取出name數(shù)據(jù) varname1=storage.getItem( name ); alert(name1);
這段代碼在Chrome瀏覽器控制臺中的顯示結(jié)果就是一個顯示Tom的提示框。可見我們已經(jīng)通過這種方式正確的進行了數(shù)據(jù)的存儲與讀取。如果我們想刪除這些存儲的數(shù)據(jù)，可以使用removeItem方法。在以上代碼中加入如下代碼：JavaScript Code復(fù)制內(nèi)容到剪貼板
這時當(dāng)我們再次alert的時候?qū)@示null，因為這個數(shù)據(jù)已經(jīng)被清空了。了解了一些基本的本地存儲用法和思想后，我們來系統(tǒng)的介紹一下本地存儲。本地存儲分為三大類：localStorage/sessionStorage/本地數(shù)據(jù)庫localStorage和sessionStorage二者的用法、所包含的函數(shù)、調(diào)用方法等都是相同的，二者僅僅是含義不同。其中，localStorage所存儲的數(shù)據(jù)是長期有效的，而sessionStorage所存儲的信息當(dāng)每個會話（session）關(guān)閉時就會銷毀（通俗的說就是頁面關(guān)閉后數(shù)據(jù)自動銷毀）。由于二者的特性不同，因此應(yīng)用的場景也有很大區(qū)別。通常，當(dāng)我們需要存儲一些用戶配置項等一些需要長時間存儲的數(shù)據(jù)信息時，需要使用localStorgae進行保存，利用了其時效長的特點。相應(yīng)的，當(dāng)我們需要實現(xiàn)類似購物車等基于session的功能時，就需要使用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值，就可以從中取出對應(yīng)的value值。3、刪除特定的數(shù)據(jù)removeItem
用法為localStorage.removeItem(key)，刪除key對應(yīng)的數(shù)據(jù)。4、清空所有數(shù)據(jù)clear
用法為localStorage.clear()，表示清空所有存儲系統(tǒng)中的數(shù)據(jù)。以上就是一些最基本的sessionStorage/localStorage用法，希望對大家的學(xué)習(xí)有所幫助。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML中head頭結(jié)構(gòu)應(yīng)該如何使用

下一篇：html param標(biāo)簽的使用與定義詳解