這篇文章主要介紹了localStorage本地存儲(chǔ)和sessionStorage會(huì)話存儲(chǔ)實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇localStorage本地存儲(chǔ)和sessionStorage會(huì)話存儲(chǔ)實(shí)例分析文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),潮南企業(yè)網(wǎng)站建設(shè),潮南品牌網(wǎng)站建設(shè),網(wǎng)站定制,潮南網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,潮南網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

 HTML5允許在客戶端實(shí)現(xiàn)較大規(guī)模的數(shù)據(jù)存儲(chǔ)，用戶可以使用web存儲(chǔ)，也可以使用web sql數(shù)據(jù)庫(kù)，這兩項(xiàng)新增功能為瀏覽器成為應(yīng)用程序開發(fā)平臺(tái)奠定了堅(jiān)持的數(shù)據(jù)操作基礎(chǔ)。

Web存儲(chǔ)機(jī)制是一中通過(guò)字符串形式的key/value對(duì)來(lái)安全的存儲(chǔ)和使用數(shù)據(jù)的方法，其目標(biāo)是提供一個(gè)更全面的，可以創(chuàng)建交互式Web應(yīng)用程序的方法。

一、web存儲(chǔ)和cookie的對(duì)比：

1）首先是容量不同，web存儲(chǔ)的存儲(chǔ)量更大，更安全，更易于使用，而Cookie的存儲(chǔ)量是有限制的。

2）存儲(chǔ)的持久性不同，web存儲(chǔ)是通過(guò)瀏覽器來(lái)永久存儲(chǔ)和李大小的數(shù)據(jù)的方法

二、本地存儲(chǔ)和會(huì)話存儲(chǔ)

在客戶端存儲(chǔ)數(shù)據(jù)的類型有兩種：

1）localStorage ： 本地存儲(chǔ)，沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)

2）sessionStorage ： 會(huì)話存儲(chǔ)，針對(duì)一個(gè)會(huì)話期的數(shù)據(jù)存儲(chǔ)

下面就寫一個(gè)簡(jiǎn)單的例子，在客戶端持久存儲(chǔ)數(shù)據(jù)

Js代碼  收藏代碼

var strDomain = "127.0.0.1";    //定義當(dāng)前域  

try{  

    /** 

        *因?yàn)檩^早版本的FireFox沒有實(shí)現(xiàn)localStorage，但他提供了globalStorage屬性用于指定域創(chuàng)建本地存儲(chǔ)區(qū)域，其中也可以指定這個(gè)域?yàn)楫?dāng)前域，因此  

        * ，下面這句代碼可以用來(lái)實(shí)現(xiàn)localStorage在各瀏覽器間的兼容 

      **/  

    var oStorage = window.localStorage ? window.localStorage : window.globalStorage[strDomain]; //h獲取存儲(chǔ)區(qū)域  

    //查看vistorCount是否存在  

    //如果存在就讀取并加1，增加一次訪問統(tǒng)計(jì)  

    //如果不存在就意味著第一次訪問，將其初始化為1  

    if(oStorage.visitorCount){  

        oStorage.visitorCount = parseInt(oStorage.visitorCount,10) + 1;  

    } else {  

        oStorage.visitorCount = 1;    

    }  

    document.write("歡迎第" + oStorage.visitorCount + "次訪問");  //寫出訪問統(tǒng)計(jì)數(shù)據(jù)  

} catch(err) {  

    alert(err.message ? err.message : err.toString());    

}  

同時(shí)我們使用開發(fā)人員工具（我使用的是Chrome瀏覽器）可以清晰的看到在客戶端存儲(chǔ)的數(shù)據(jù)。

在會(huì)話期存儲(chǔ)數(shù)據(jù)

SessionStorage針對(duì)一個(gè)Session進(jìn)行數(shù)據(jù)存儲(chǔ)，當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除。

下面的代碼用于創(chuàng)建一個(gè)提交表單：

Html代碼  收藏代碼

關(guān)于“l(fā)ocalStorage本地存儲(chǔ)和sessionStorage會(huì)話存儲(chǔ)實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“l(fā)ocalStorage本地存儲(chǔ)和sessionStorage會(huì)話存儲(chǔ)實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。