溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)HTML5中如何實現(xiàn)網(wǎng)絡(luò)存儲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
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>關(guān)于“HTML5中如何實現(xiàn)網(wǎng)絡(luò)存儲”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼