App下載

HTML5中網(wǎng)絡(luò)存儲方法總結(jié)!網(wǎng)絡(luò)存儲案例分享!

孫尚香 2021-08-12 16:12:17 瀏覽數(shù) (2148)
反饋

隨著互聯(lián)網(wǎng)的不斷更新中和我們的網(wǎng)絡(luò)也越來越完善了,我們需要的網(wǎng)絡(luò)數(shù)據(jù)村粗也越來越多,那么我們就來說下“HTML5中網(wǎng)絡(luò)存儲方法總結(jié)!網(wǎng)絡(luò)存儲案例分享! ”這方面的內(nèi)容吧!

1 前言

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

2 Web storage及其兩種存儲方式

2.1 Web Storage簡介

2.1.1 特點

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

(2)容量較大,sessionStorage約5M,localStorage約20M

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

2.1.2 優(yōu)勢

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

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

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

2.2 localStorage實現(xiàn)本地存儲

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

2.2.1 localStorage中的方法屬性

方法屬性

描述

setItem(key,value)

該方法接收一個鍵名和值作為參數(shù),將會把鍵值對添加到存儲中,如果鍵名存在,則更新其對應(yīng)的值

getItem(key)

該方法接收一個鍵名作為參數(shù),返回鍵名對應(yīng)的值

romoveItem(key)

該方法接收一個鍵名作為參數(shù),并把該鍵名從存儲中刪除

length

類似數(shù)組的length屬性,用于訪問Storage對象中item的數(shù)量

key(n)

用于訪問第n個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ū)域存儲,區(qū)域存儲是指數(shù)據(jù)只在單個頁面的會話期內(nèi)有效。由于 sessionStroage 也是 Storage 的實例, sessionStroage 與 localStorage 中的方法基本一致,唯一區(qū)別就是存儲數(shù)據(jù)的生命周期不同, locaStorage 是永久性存儲,而 sessionStorage 的生命周期與會話保持一致,會話結(jié)束時數(shù)據(jù)消失。

 2.3sessionStorage實現(xiàn)區(qū)域存儲 

從硬件方面理解, localStorage 的數(shù)據(jù)是存儲子在硬盤中的,關(guān)閉瀏覽器時數(shù)據(jù)仍然在硬盤上,再次打開瀏覽器仍然可以獲取,而 sessionStorage 的數(shù)據(jù)保存在瀏覽器的內(nèi)存中,當(dāng)瀏覽器關(guān)閉后,內(nèi)存將被自動清除,需要注意的是, sessionStorage 中存儲的數(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;

// 定義一個 user 對象用來保存獲取的信息

var user  = {

username: username,

age: age

}

// 使用 stringify() 將 JSON 對象序列號并存入到 sessionStorage

window.sessionStorage.setItem("user",JSON.stringify(user));

};

//sessionStorage   里面存儲數(shù)據(jù),如果關(guān)閉了瀏覽器,數(shù)據(jù)就會消失 ..

// 單個瀏覽器窗口頁面有效

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中的兩種存儲方式都比較實用,我們在設(shè)計前端頁面時,可以根據(jù)相應(yīng)的用戶訪問情況預(yù)測來增添相應(yīng)的js,既增加了用戶瀏覽的體驗,又能實現(xiàn)存儲管理的高效性,合理的利用存儲空間。

我們今天就關(guān)于“HTML5中網(wǎng)絡(luò)存儲方法總結(jié)!網(wǎng)絡(luò)存儲案例分享! ”這方面的內(nèi)容就分享到這里了!更多的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)!


0 人點贊