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內容 |
代碼示例：
<!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 里面數據的數據保存到 localStoragevar username=document.getElementById("username").value;window.localStorage.setItem("username",username);};document.getElementById("getlocalStorageId").onclick=function(){// 獲取數據，從 localStoragevar 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 對象序列號并存入到 sessionStoragewindow.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 網絡存儲內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持武林網！
新聞熱點
疑難解答
