傳統方式使用document.cookie來進行儲存，但是由於其儲存的空間只有4KB左右，並且需要複雜的操作進行解析，給發開者帶來很多不便，為此，HTML5規範提出了網路儲存的解決方案，本文透過例項程式碼給大家詳細介紹，感興趣的朋友一起看看吧
1 前言
隨著網際網路的快速發展，基於網頁的應用越來越普遍，同時也變得越來越複雜，為了滿足日益更新的需求，會經常性的在本地裝置上儲存資料，例如記錄歷史活動資訊。傳統方式使用document.cookie來進行儲存，但是由於其儲存的空間只有4KB左右，並且需要複雜的操作進行解析，給發開者帶來很多不便，為此，HTML5規範提出了網路儲存的解決方案。
2 Web storage及其兩種儲存方式
2.1 Web Storage簡介
2.1.1 特點
（1）設定資料和讀取資料比較方便
（2）容量較大，sessionStorage約5M，localStorage約20M
（3）只能儲存字串，如果要儲存JSON物件，可以使用window.JSON的stringify()方法和parse()方法進行序列化和反序列化。
2.1.2 優勢
（1）減少網路流量:一旦資料儲存在本地後，就可以避免再向伺服器請求資料，因此減少不必要的資料請求，減少資料在瀏覽器和伺服器間不必要地來回傳遞。
（2）快速顯示資料:效能好，從本地讀資料比透過網路從伺服器獲得資料快得多，本地資料可以即時獲得。加上網頁本身也可以有快取，整個頁面和資料都在本地的話，可以立即顯示。
（3）臨時儲存:很多時候資料只需要在使用者瀏覽一組頁面期間使用，關閉視窗後資料就可以丟棄了，這種情況使用sessionStorage非常方便。
2.2 localStorage實現本地儲存
localStorage作為HTML5 Web Storage的API之一，主要的作用是進行本地儲存。本地儲存是指將資料按照鍵值對的方式儲存在客戶端計算機中，直到使用者或者指令碼主動清除資料，否則該資料會一直存在。也就是說，使用了本地儲存的資料將被持久化。localStorage的優勢在於擴充了cookie的4KB限制，並且會可以將第一次請求的資料直接儲存到本地，這個相當於一個5M大小的針對於前端頁面的資料庫。
2.2.1 localStorage中的方法屬性
| 方法屬性 | 描述 |
| setItem(key，value) | 該方法接收一個鍵名和值作為引數，將會把鍵值對新增到儲存中，如果鍵名存在，則更新其對應的值 |
| getItem(key) | 該方法接收一個鍵名作為引數，返回鍵名對應的值 |
| romoveItem(key） | 該方法接收一個鍵名作為引數，並把該鍵名從儲存中刪除 |
| length | 類似陣列的length屬性，用於訪問Storage物件中item的數量 |
| key(n) | 用於訪問第n個key的名稱 |
| clear() | 清除當前域下的所有localSotrage內容 |
表格 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 設定資料 " id="localStorageId">
<input type="button" value="localStorage 獲取資料 " id="getlocalStorageId">
<input type="button" value="localStorage 刪除資料 " id="removesessionStorageId">
<script>
document.getElementById("localStorageId").onclick=function(){
// 把使用者在 input 裡面資料的資料儲存到 localStorage
var username=document.getElementById("username").value;
window.localStorage.setItem("username",username);
};
document.getElementById("getlocalStorageId").onclick=function(){
// 獲取資料，從 localStorage
var username=window.localStorage.getItem("username");
alert(username);
};
document.getElementById("removesessionStorageId").onclick=function(){
// 刪除 localStorage 中的資料
var username=document.getElementById("username").value;
window.localStorage.removeItem("username");
};
</script>
</body>
</html>
sessionStorage 主要用於區域儲存，區域儲存是指資料只在單個頁面的會話期內有效。由於 sessionStroage 也是 Storage 的例項， sessionStroage 與 localStorage 中的方法基本一致，唯一區別就是儲存資料的生命週期不同， locaStorage 是永久性儲存，而 sessionStorage 的生命週期與會話保持一致，會話結束時資料消失。
2.3sessionStorage實現區域儲存
從硬體方面理解， localStorage 的資料是儲存子在硬碟中的，關閉瀏覽器時資料仍然在硬碟上，再次開啟瀏覽器仍然可以獲取，而 sessionStorage 的資料儲存在瀏覽器的記憶體中，當瀏覽器關閉後，記憶體將被自動清除，需要注意的是， sessionStorage 中儲存的資料只在當前瀏覽器視窗有效。
程式碼示例：
<!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 設定資料 " 11 id="sessionStorageId">
<input type="button" value="sessionStorage 獲取資料 " id="getsessionStorageId">
<input type="button" value="sessionStorage 清除所有資料 " id="clearsessionStorageId">
<script>
// 增加資料
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 裡面儲存資料，如果關閉了瀏覽器，資料就會消失 ..
// 單個瀏覽器視窗頁面有效
document.getElementById("getsessionStorageId").onclick = function() {
var valu = window.sessionStorage.getItem("user");
alert(valu);
};
// 清除所有的資料
document.getElementById("clearsessionStorageId").onclick = function() {
window.sessionStorage.clear();
};
</script>
</body>
</html>
3 總結
HTML5中的兩種儲存方式都比較實用，我們在設計前端頁面時，可以根據相應的使用者訪問情況預測來增添相應的js，既增加了使用者瀏覽的體驗，又能實現儲存管理的高效性，合理的利用儲存空間。
到此這篇關於HTML5中的網路儲存的文章就介紹到這了,更多相關html5 網路儲存內容請搜尋以前的文章或繼續瀏覽下面的相關文章