這篇文章將為大家詳細(xì)講解有關(guān)HTML5中如何實(shí)現(xiàn)網(wǎng)絡(luò)存儲(chǔ)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、蓋州ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的蓋州網(wǎng)站制作公司

1 前言

隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁(yè)的應(yīng)用越來(lái)越普遍，同時(shí)也變得越來(lái)越復(fù)雜，為了滿足日益更新的需求，會(huì)經(jīng)常性的在本地設(shè)備上存儲(chǔ)數(shù)據(jù)，例如記錄歷史活動(dòng)信息。傳統(tǒng)方式使用document.cookie來(lái)進(jìn)行存儲(chǔ)，但是由于其存儲(chǔ)的空間只有4KB左右，并且需要復(fù)雜的操作進(jìn)行解析，給發(fā)開(kāi)者帶來(lái)很多不便，為此，HTML5規(guī)范提出了網(wǎng)絡(luò)存儲(chǔ)的解決方案。

2 Web storage及其兩種存儲(chǔ)方式

2.1 Web Storage簡(jiǎn)介

2.1.1 特點(diǎn)

（1）設(shè)置數(shù)據(jù)和讀取數(shù)據(jù)比較方便

（2）容量較大，sessionStorage約5M，localStorage約20M

（3）只能存儲(chǔ)字符串，如果要存儲(chǔ)JSON對(duì)象，可以使用window.JSON的stringify()方法和parse()方法進(jìn)行序列化和反序列化。

2.1.2 優(yōu)勢(shì)

（1）減少網(wǎng)絡(luò)流量:一旦數(shù)據(jù)保存在本地后，就可以避免再向服務(wù)器請(qǐng)求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請(qǐng)求，減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞。

（2）快速顯示數(shù)據(jù):性能好，從本地讀數(shù)據(jù)比通過(guò)網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多，本地?cái)?shù)據(jù)可以即時(shí)獲得。加上網(wǎng)頁(yè)本身也可以有緩存，整個(gè)頁(yè)面和數(shù)據(jù)都在本地的話，可以立即顯示。

（3）臨時(shí)存儲(chǔ):很多時(shí)候數(shù)據(jù)只需要在用戶瀏覽一組頁(yè)面期間使用，關(guān)閉窗口后數(shù)據(jù)就可以丟棄了，這種情況使用sessionStorage非常方便。

2.2 localStorage實(shí)現(xiàn)本地存儲(chǔ)

localStorage作為HTML5 Web Storage的API之一，主要的作用是進(jìn)行本地存儲(chǔ)。本地存儲(chǔ)是指將數(shù)據(jù)按照鍵值對(duì)的方式保存在客戶端計(jì)算機(jī)中，直到用戶或者腳本主動(dòng)清除數(shù)據(jù)，否則該數(shù)據(jù)會(huì)一直存在。也就是說(shuō)，使用了本地存儲(chǔ)的數(shù)據(jù)將被持久化。localStorage的優(yōu)勢(shì)在于拓展了cookie的4KB限制，并且會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地，這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù)。

2.2.1 localStorage中的方法屬性

表格 2.2.1

代碼示例：

sessionStorage 主要用于區(qū)域存儲(chǔ)，區(qū)域存儲(chǔ)是指數(shù)據(jù)只在單個(gè)頁(yè)面的會(huì)話期內(nèi)有效。由于 sessionStroage 也是 Storage 的實(shí)例， sessionStroage 與 localStorage 中的方法基本一致，唯一區(qū)別就是存儲(chǔ)數(shù)據(jù)的生命周期不同， locaStorage 是永久性存儲(chǔ)，而 sessionStorage 的生命周期與會(huì)話保持一致，會(huì)話結(jié)束時(shí)數(shù)據(jù)消失。

 2.3sessionStorage實(shí)現(xiàn)區(qū)域存儲(chǔ) 

從硬件方面理解， localStorage 的數(shù)據(jù)是存儲(chǔ)子在硬盤(pán)中的，關(guān)閉瀏覽器時(shí)數(shù)據(jù)仍然在硬盤(pán)上，再次打開(kāi)瀏覽器仍然可以獲取，而 sessionStorage 的數(shù)據(jù)保存在瀏覽器的內(nèi)存中，當(dāng)瀏覽器關(guān)閉后，內(nèi)存將被自動(dòng)清除，需要注意的是， sessionStorage 中存儲(chǔ)的數(shù)據(jù)只在當(dāng)前瀏覽器窗口有效。

代碼示例：

姓名：   年齡：  

關(guān)于“HTML5中如何實(shí)現(xiàn)網(wǎng)絡(luò)存儲(chǔ)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。