HTML5中的網(wǎng)絡(luò)存儲(chǔ)實(shí)現(xiàn)方式

2020-05-21 17:09:20 來源：互聯(lián)網(wǎng)作者：算法與編程之美 人氣： 次閱讀 107 條評(píng)論

傳統(tǒng)方式使用document.cookie來進(jìn)行存儲(chǔ)，但是由于其存儲(chǔ)的空間只有4KB左右，并且需要復(fù)雜的操作進(jìn)行解析，給發(fā)開者帶來很多不便，為此，HTML5規(guī)范提出了網(wǎng)絡(luò)存儲(chǔ)的解決方案，本文通過...

傳統(tǒng)方式使用document.cookie來進(jìn)行存儲(chǔ)，但是由于其存儲(chǔ)的空間只有4KB左右，并且需要復(fù)雜的操作進(jìn)行解析，給發(fā)開者帶來很多不便，為此，HTML5規(guī)范提出了網(wǎng)絡(luò)存儲(chǔ)的解決方案，本文通過實(shí)例代碼給大家詳細(xì)介紹，感興趣的朋友一起看看吧

1 前言

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

（2）快速顯示數(shù)據(jù):性能好，從本地讀數(shù)據(jù)比通過網(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ì)一直存在。也就是說，使用了本地存儲(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中的方法屬性

方法屬性 描述
setItem(key，value) 該方法接收一個(gè)鍵名和值作為參數(shù)，將會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值
getItem(key) 該方法接收一個(gè)鍵名作為參數(shù)，返回鍵名對(duì)應(yīng)的值
romoveItem(key） 該方法接收一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲(chǔ)中刪除
length 類似數(shù)組的length屬性，用于訪問Storage對(duì)象中item的數(shù)量
key(n) 用于訪問第n個(gè)key的名稱
clear() 清除當(dāng)前域下的所有l(wèi)ocalSotrage內(nèi)容

表格 2.2.1

代碼示例：

<!DOCTYPE? html>
<html>?
<head>?
<meta? charset="UTF-8">?
<title>localStorage</title>?
</head>?
<body>?
<input? type="text" id="username" >?
<input? type="button"?? value="localStorage 設(shè)置數(shù)據(jù) "? id="localStorageId">?
<input? type="button"?? value="localStorage 獲取數(shù)據(jù) "? id="getlocalStorageId">?
<input? type="button"?? value="localStorage 刪除數(shù)據(jù) "? id="removesessionStorageId">
?
<script>?
document.getElementById("localStorageId").onclick=function(){?
// 把用戶在 input?? 里面數(shù)據(jù)的數(shù)據(jù)保存到 localStorage?
var? username=document.getElementById("username").value;?
window.localStorage.setItem("username",username);
?};?
document.getElementById("getlocalStorageId").onclick=function(){?
// 獲取數(shù)據(jù)，從 localStorage?
var? username=window.localStorage.getItem("username");?
alert(username);?
};?
document.getElementById("removesessionStorageId").onclick=function(){?
// 刪除 localStorage 中的數(shù)據(jù)?
var? username=document.getElementById("username").value;?
window.localStorage.removeItem("username");?
};?
</script>?
</body>?
</html>

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ǔ)子在硬盤中的，關(guān)閉瀏覽器時(shí)數(shù)據(jù)仍然在硬盤上，再次打開瀏覽器仍然可以獲取，而 sessionStorage 的數(shù)據(jù)保存在瀏覽器的內(nèi)存中，當(dāng)瀏覽器關(guān)閉后，內(nèi)存將被自動(dòng)清除，需要注意的是， sessionStorage 中存儲(chǔ)的數(shù)據(jù)只在當(dāng)前瀏覽器窗口有效。

代碼示例：

<!DOCTYPE? html>?
<html>?
<head>?
<meta? charset="UTF-8">?
<title>sessionStorage</title>?
</head>?
<body>?
姓名：? <input type="text" id="username"> 年齡：? <input type="text" id="age">?
<input? type="button" value="sessionStorage 設(shè)置數(shù)據(jù) "? 11 id="sessionStorageId">?
<input? type="button" value="sessionStorage 獲取數(shù)據(jù) "? id="getsessionStorageId">
<input? type="button" value="sessionStorage 清除所有數(shù)據(jù) "? id="clearsessionStorageId">?
<script>?
// 增加數(shù)據(jù)?
document.getElementById("sessionStorageId").onclick? = function() {?
// 獲取姓名和年齡輸入框的值?
var? username = document.getElementById("username").value;?
var age =? document.getElementById("age").value;?
// 定義一個(gè) user 對(duì)象用來保存獲取的信息?
var user? = {?
username: username,?
age: age?
}?
// 使用 stringify() 將 JSON 對(duì)象序列號(hào)并存入到 sessionStorage?
window.sessionStorage.setItem("user",JSON.stringify(user));
?
};
?
//sessionStorage?? 里面存儲(chǔ)數(shù)據(jù)，如果關(guān)閉了瀏覽器，數(shù)據(jù)就會(huì)消失 ..?
// 單個(gè)瀏覽器窗口頁(yè)面有效?
document.getElementById("getsessionStorageId").onclick? = function() {?
var valu = window.sessionStorage.getItem("user");?
alert(valu);?
};?
// 清除所有的數(shù)據(jù)?
document.getElementById("clearsessionStorageId").onclick? = function() {?
window.sessionStorage.clear();?
};?
</script>?
</body>?
</html>

3 總結(jié)

HTML5中的兩種存儲(chǔ)方式都比較實(shí)用，我們?cè)谠O(shè)計(jì)前端頁(yè)面時(shí)，可以根據(jù)相應(yīng)的用戶訪問情況預(yù)測(cè)來增添相應(yīng)的js，既增加了用戶瀏覽的體驗(yàn)，又能實(shí)現(xiàn)存儲(chǔ)管理的高效性，合理的利用存儲(chǔ)空間。

到此這篇關(guān)于HTML5中的網(wǎng)絡(luò)存儲(chǔ)的文章就介紹到這了,更多相關(guān)html5 網(wǎng)絡(luò)存儲(chǔ)內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章

您可能感興趣的文章

相關(guān)文章