溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是HTML5使用Web Storage本地存儲(chǔ)的詳細(xì)介紹，相信大部分人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，話不多說(shuō)，一起往下看吧。
在HTML5出現(xiàn)之前，如果開(kāi)發(fā)者需要在客戶端存儲(chǔ)少量的數(shù)據(jù)，只能通過(guò)cookie來(lái)實(shí)現(xiàn)，但是cookie存在幾個(gè)不足點(diǎn)：
?每個(gè)域名下cookie的大小限制在4KB。
?cookie會(huì)包含在每個(gè)http請(qǐng)求中，這樣會(huì)導(dǎo)致發(fā)送重復(fù)的數(shù)據(jù)。
?cookie在網(wǎng)絡(luò)傳輸過(guò)程中沒(méi)有加密，存在安全隱患。
在HTML5新增了Web storage功能，Web Storage官方建議為每個(gè)網(wǎng)站是5MB，能存儲(chǔ)比cookie更多的數(shù)據(jù)，并且具有比cookie更強(qiáng)大的功能。Web Storage現(xiàn)在已經(jīng)得到了Firefox、Opera、Chrome、Safari各主流瀏覽器的支持。
Web Storage簡(jiǎn)介
Web Storage又分為Session Storage和Local Storage：
Session Storage：與session類(lèi)似，Session Storage保存的數(shù)據(jù)生存期限與Session期限相同，用戶Session結(jié)束時(shí)，Session Storage保存的數(shù)據(jù)也就消失了。
Local Storage： Local Storage保存的數(shù)據(jù)一直在本地，除非用戶或程序顯式地清楚，否則這些數(shù)據(jù)會(huì)一致存在。
window對(duì)象中提供了sessionStorage和localStorage兩個(gè)屬性，這兩個(gè)屬性分別代表了Session Storage和Local Storage。這個(gè)兩個(gè)功能和用法幾乎是相同的，只是它們保存數(shù)據(jù)的生存期限不同而已。storage提供了以下屬性和方法（以localStorage為例）：
?localStorage.length：獲取key-value對(duì)的數(shù)目；
?localStorage.key(index)：獲取第index索引的key；
?localStorage.getItem(key)：獲取指定key對(duì)應(yīng)的value；
?localStorage.setItem(key,value)：保存指定的key-value對(duì)；
?localStorage.removeItem(key)：刪除指定key對(duì)應(yīng)的key-value對(duì)；
?localStorage.clear()：刪除所有key-value對(duì)。
需要注意的是，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。那么一些不是字符串的數(shù)據(jù)，我們可以通過(guò)JSON等方式將其轉(zhuǎn)化成字符串格式后在操作。
Web Storage用JSON存儲(chǔ)多個(gè)數(shù)據(jù)
我們通過(guò)一個(gè)小程序來(lái)熟悉一下相關(guān)屬性和方法的基本用法：
?錄入學(xué)生的基本信息（包括學(xué)號(hào)，姓名，年級(jí)，性別），以學(xué)號(hào)為key值來(lái)存儲(chǔ)到local storage中；
?通過(guò)學(xué)號(hào)來(lái)查詢學(xué)生的基本信息；
?顯示全部學(xué)生的信息；
首先我們?cè)O(shè)計(jì)HTML頁(yè)面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML本地存儲(chǔ)之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>
<p id="content">
<label for="user_num">學(xué)號(hào)：</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">年級(jí)：</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é)號(hào)：</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="顯示所有">
<p id="list">
</p>
</p>
<br />
</body>
</html>
通過(guò)JS實(shí)現(xiàn)學(xué)生信息保存到local storage中，通過(guò)分析我們發(fā)現(xiàn)需要保存的學(xué)生信息包括多個(gè)字段，這時(shí)，我們可以利用JSON的stringify()方法，將復(fù)雜對(duì)象轉(zhuǎn)變成字符串，存入Web Storage中；當(dāng)從Web Storage中讀取時(shí)，可以通過(guò)JSON的parse()方法再轉(zhuǎn)換成JSON對(duì)象：
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中的存儲(chǔ)信息：
用JS實(shí)現(xiàn)通過(guò)學(xué)號(hào)查找學(xué)生信息時(shí)，需要注意取出的value值為JSON字符串，需要通過(guò)JSON的parse()方法再轉(zhuǎn)換成JSON對(duì)象，代碼如下：
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é)號(hào)為："+user_num+"的基本信息： 姓名："+msg.user_name + "，年級(jí)：" + msg.grade+",性別："+msg.sex;
}同理，顯示全部學(xué)生信息時(shí)，也一樣需要將取出的value字符串轉(zhuǎn)換成JSON對(duì)象：
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é)號(hào)</td><td>姓名</td><td>年級(jí)</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)前還沒(méi)有數(shù)據(jù)";
}
}最后的效果圖如下：
Web Storage存儲(chǔ)圖片
前面我們已經(jīng)提到過(guò)，本地存儲(chǔ)只支持字符串的存取，那么我們要做的就是將圖片轉(zhuǎn)換成 Data URI 。其中一種實(shí)現(xiàn)方式就是用canvas元素來(lái)加載圖片。然后你可以以Data URI的形式從canvas中讀取圖片。
保存圖片的函數(shù)如下：
function setImg(key,src){
var img = document.createElement('img');
//當(dāng)圖片加載完成的時(shí)候觸發(fā)回調(diào)函數(shù)
img.addEventListener("load",function(){
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");
//確保canvas元素大小和圖片的尺寸一致
imgCanvas.width = this.width;
imgCanvas.height = this.height;
//渲染圖片到canvas中
imgContext.drawImage(this,0,0,this.width,this.height);
//用data url的形式取出
img.crossOrigin = "*"; //防止跨域取照片出錯(cuò)
var imgAsDataURL = imgCanvas.toDataURL("image/png");
//保存到本地存儲(chǔ)中
try{
localStorage.setItem(key, imgAsDataURL);
}
catch(e){
alert("保存失?。≌?qǐng)重試。。。");
}
}, false);
img.src = src;
}該函數(shù)接收兩個(gè)參數(shù)，一個(gè)是key值，還有一個(gè)是圖片的路徑，通過(guò)setImg(“img1”,”1.jpg”)保存圖片到localStorage，我們可以查看Local Storage的存儲(chǔ)情況：
獲取并顯示的代碼函數(shù)如下：
function getImg(key){
var srcStr = localStorage.getItem(key);
var imgObj = document.createElement('img');
imgObj.src = srcStr;
document.body.appendChild(imgObj);
}該函數(shù)只接收一個(gè)參數(shù)：需要查找圖片的key值：
以上就是HTML5使用Web Storage本地存儲(chǔ)的簡(jiǎn)略介紹，詳細(xì)使用情況還需要大家自己使用過(guò)才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼