HTML5本地存儲之Web Storage詳解

發(fā)布時間：2016-07-04 14:14:56 作者：佚名

我要評論

這篇文章主要為大家詳細(xì)介紹了HTML5本地存儲之Web Storage的相關(guān)資料，Web Storage如何用JSON存儲多個數(shù)據(jù)，感興趣的小伙伴們可以參考一下

在HTML5出現(xiàn)之前，如果開發(fā)者需要在客戶端存儲少量的數(shù)據(jù)，只能通過cookie來實現(xiàn)，但是cookie存在幾個不足點(diǎn)：

•每個域名下cookie的大小限制在4KB。
•cookie會包含在每個http請求中，這樣會導(dǎo)致發(fā)送重復(fù)的數(shù)據(jù)。
•cookie在網(wǎng)絡(luò)傳輸過程中沒有加密，存在安全隱患。

在HTML5新增了Web storage功能，Web Storage官方建議為每個網(wǎng)站是5MB，能存儲比cookie更多的數(shù)據(jù)，并且具有比cookie更強(qiáng)大的功能。Web Storage現(xiàn)在已經(jīng)得到了Firefox、Opera、Chrome、Safari各主流瀏覽器的支持。

Web Storage簡介

Web Storage又分為Session Storage和Local Storage：

Session Storage：與session類似，Session Storage保存的數(shù)據(jù)生存期限與Session期限相同，用戶Session結(jié)束時，Session Storage保存的數(shù)據(jù)也就消失了。

Local Storage： Local Storage保存的數(shù)據(jù)一直在本地，除非用戶或程序顯式地清楚，否則這些數(shù)據(jù)會一致存在。

window對象中提供了sessionStorage和localStorage兩個屬性，這兩個屬性分別代表了Session Storage和Local Storage。這個兩個功能和用法幾乎是相同的，只是它們保存數(shù)據(jù)的生存期限不同而已。storage提供了以下屬性和方法（以localStorage為例）：

•localStorage.length：獲取key-value對的數(shù)目；
•localStorage.key(index)：獲取第index索引的key；
•localStorage.getItem(key)：獲取指定key對應(yīng)的value；
•localStorage.setItem(key,value)：保存指定的key-value對；
•localStorage.removeItem(key)：刪除指定key對應(yīng)的key-value對；
•localStorage.clear()：刪除所有key-value對。

需要注意的是，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。那么一些不是字符串的數(shù)據(jù)，我們可以通過JSON等方式將其轉(zhuǎn)化成字符串格式后在操作。

Web Storage用JSON存儲多個數(shù)據(jù)

我們通過一個小程序來熟悉一下相關(guān)屬性和方法的基本用法：

•錄入學(xué)生的基本信息（包括學(xué)號，姓名，年級，性別），以學(xué)號為key值來存儲到local storage中；
•通過學(xué)號來查詢學(xué)生的基本信息；
•顯示全部學(xué)生的信息；

首先我們設(shè)計HTML頁面

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML本地存儲之web storage</title>
<style type="text/css">
#content{
border: 1px solid #3D19DD;
width:600px;
text-align:center;
padding: 10px 0;
margin: 0 auto;
}
#content input{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content">
<label for="user_num">學(xué)號：</label>
<input type="text" id="user_num" name="user_num" />
<br/>
<label for="user_name">姓名：</label>
<input type="text" id="user_name" name="user_name" />
<br/>
<label for="grade">年級：</label>
<input type="text" id="grade" name="grade"/>
<br/>
<label for="sex">性別：</label>
<input type="text" id="sex" name="sex"/>
<br/>
<input type="button" onclick="save()" value="添加名單"/>
<hr/>
<label for="search_num">輸入學(xué)號：</label>
<input type="text" id="search_num" name="search_num"/>
<input type="button" onclick="find()" value="查找學(xué)生信息"/>
<p id="find_result"><br/></p>
<hr/>
<input type="button" onclick="show()" value="顯示所有">
<div id="list">
</div>
</div>
<br />
</body>
</html>

通過JS實現(xiàn)學(xué)生信息保存到local storage中，通過分析我們發(fā)現(xiàn)需要保存的學(xué)生信息包括多個字段，這時，我們可以利用JSON的stringify()方法，將復(fù)雜對象轉(zhuǎn)變成字符串，存入Web Storage中；當(dāng)從Web Storage中讀取時，可以通過JSON的parse()方法再轉(zhuǎn)換成JSON對象：

JavaScript Code復(fù)制內(nèi)容到剪貼板

function save(){
var user_num = document.getElementById("user_num").value;
var user_nameElement = document.getElementById("user_name").value;
var gradeElement = document.getElementById("grade").value;
var sexElement = document.getElementById("sex").value;
var msg = {
user_name: user_nameElement,
grade: gradeElement,
sex: sexElement,
};
localStorage.setItem(user_num,JSON.stringify(msg));
}

我們往localStorage里存入三條學(xué)生信息，并查看localStorage中的存儲信息：

用JS實現(xiàn)通過學(xué)號查找學(xué)生信息時，需要注意取出的value值為JSON字符串，需要通過JSON的parse()方法再轉(zhuǎn)換成JSON對象，代碼如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板

function find(){
var user_num = document.getElementById("search_num").value;
var str = localStorage.getItem(user_num);
var msg = JSON.parse(str);
var find_result = document.getElementById("find_result");
find_result.innerHTML = "學(xué)號為："+user_num+"的基本信息：姓名："+msg.user_name + "，年級：" + msg.grade+",性別："+msg.sex;
}

同理，顯示全部學(xué)生信息時，也一樣需要將取出的value字符串轉(zhuǎn)換成JSON對象：

JavaScript Code復(fù)制內(nèi)容到剪貼板

function show(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1' style='width:300px; margin:0 auto;'>";
result += "<tr><td>學(xué)號</td><td>姓名</td><td>年級</td><td>性別</td></tr>";
for(var i=0;i<localStorage.length;i++){
var user_num = localStorage.key(i);
var str = localStorage.getItem(user_num);
var msg = JSON.parse(str);
result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "當(dāng)前還沒有數(shù)據(jù)";
}
}