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

1、談一談html5本地存儲技術(shù)本地緩存是html5浮現(xiàn)的新技術(shù)，這個技術(shù)的浮現(xiàn)使得移動web的開發(fā)成為了可能。我們都知道，要想打造一個高性能的移動應(yīng)用，速度是關(guān)鍵。而在html5之前，惟獨(dú)cookie能夠存儲數(shù)據(jù)，大小惟獨(dú)4kb。這嚴(yán)峻限制了應(yīng)用文件的存儲，導(dǎo)致web開發(fā)的移動應(yīng)用程序需要較長的加載時光。有了本地存儲，讓web移動應(yīng)用能夠更臨近原生。掃瞄器中，本地存儲通過window.localstorage調(diào)用。推斷掃瞄器是否支持本地存儲的代碼如下：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ù)存儲到本地，最容易的辦法就是為window。localstorage添加一個屬性并為其賦值。例如我們要存儲一個數(shù)據(jù)name，它的值為tom，就可以通過如下方式實(shí)現(xiàn)：xml/html code復(fù)制內(nèi)容到剪貼板window.locals = tom這里要注重字符串變量需要引號。當(dāng)我們想取出本地存儲中的數(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掃瞄器控制臺中的顯示結(jié)果就是一個顯示tom的提醒框?？梢娢覀円呀?jīng)通過這種方式正確的舉行了數(shù)據(jù)的存儲與讀取。假如我們想刪除這些存儲的數(shù)據(jù)，可以用法removeitem辦法。在以上代碼中加入如下代碼：javascript code復(fù)制內(nèi)容到剪貼板storage.removeitem(name);這時當(dāng)我們再次alert的時候?qū)@示null，由于這個數(shù)據(jù)已

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

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