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

1、談一談html5本地存儲(chǔ)技術(shù)本地緩存是html5浮現(xiàn)的新技術(shù)，這個(gè)技術(shù)的浮現(xiàn)使得移動(dòng)web的開發(fā)成為了可能。我們都知道，要想打造一個(gè)高性能的移動(dòng)應(yīng)用，速度是關(guān)鍵。而在html5之前，惟獨(dú)cookie能夠存儲(chǔ)數(shù)據(jù)，大小惟獨(dú)4kb。這嚴(yán)峻限制了應(yīng)用文件的存儲(chǔ)，導(dǎo)致web開發(fā)的移動(dòng)應(yīng)用程序需要較長的加載時(shí)光。有了本地存儲(chǔ)，讓web移動(dòng)應(yīng)用能夠更臨近原生。掃瞄器中，本地存儲(chǔ)通過window.localstorage調(diào)用。推斷掃瞄器是否支持本地存儲(chǔ)的代碼如下：xml/html code復(fù)制內(nèi)容到剪貼板if(window.localstorage) alert(&39;this browser suppo

2、rts localstorage&39;); else alert(&39;this browser does not supportlocalstorage&39;); 假如我們要將數(shù)據(jù)存儲(chǔ)到本地，最容易的辦法就是為window。localstorage添加一個(gè)屬性并為其賦值。例如我們要存儲(chǔ)一個(gè)數(shù)據(jù)name，它的值為tom，就可以通過如下方式實(shí)現(xiàn)：xml/html code復(fù)制內(nèi)容到剪貼板window.locals = tom這里要注重字符串變量需要引號。當(dāng)我們想取出本地存儲(chǔ)中的數(shù)據(jù)市，可以利用getitem辦法。囫圇代碼流程如下：javascript code復(fù)制內(nèi)容

3、到剪貼板var storage = window.localstorage; = tom;/取出name數(shù)據(jù)var name1 = storage.getitem(name);alert(name1);這段代碼在chrome掃瞄器控制臺(tái)中的顯示結(jié)果就是一個(gè)顯示tom的提醒框?？梢娢覀円呀?jīng)通過這種方式正確的舉行了數(shù)據(jù)的存儲(chǔ)與讀取。假如我們想刪除這些存儲(chǔ)的數(shù)據(jù)，可以用法removeitem辦法。在以上代碼中加入如下代碼：javascript code復(fù)制內(nèi)容到剪貼板storage.removeitem(name);這時(shí)當(dāng)我們再次alert的時(shí)候?qū)@示null，由于這個(gè)數(shù)據(jù)已

4、經(jīng)被清空了。了解了一些基本的本地存儲(chǔ)使用和思想后，我們來系統(tǒng)的介紹一下本地存儲(chǔ)。本地存儲(chǔ)分為三大類：localstorage/sessionstorage/本地?cái)?shù)據(jù)庫localstorage和sessionstorage二者的使用、所包含的函數(shù)、調(diào)用辦法等都是相同的，二者僅僅是含義不同。其中，localstorage所存儲(chǔ)的數(shù)據(jù)是長久有效的，而sessionstorage所存儲(chǔ)的信息當(dāng)每個(gè)會(huì)話（session）關(guān)閉時(shí)就會(huì)銷毀（通俗的說就是頁面關(guān)閉后數(shù)據(jù)自動(dòng)銷毀）。因?yàn)槎叩奶匦圆煌?，因此?yīng)用的場景也有很大區(qū)分。通常，當(dāng)我們需要存儲(chǔ)一些用戶配置項(xiàng)等一些需要長時(shí)光存儲(chǔ)的數(shù)據(jù)信息時(shí)，需要用法loca

5、lstorgae舉行保存，利用了其時(shí)效長的特點(diǎn)。相應(yīng)的，當(dāng)我們需要實(shí)現(xiàn)類似購物車等基于session的功能時(shí)，就需要用法sessionstorage。因?yàn)閘ocalstorage和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.clea