|
方法屬性 |
描述 |
|
setItem(key，value) |
該方法接收一個(gè)鍵名和值作為參數(shù)，將會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值 |
|
getItem(key) |
該方法接收一個(gè)鍵名作為參數(shù)，返回鍵名對(duì)應(yīng)的值 |
|
romoveItem(key） |
該方法接收一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲(chǔ)中刪除 |
|
length |
類似數(shù)組的length屬性，用于訪問(wèn)Storage對(duì)象中item的數(shù)量 |
|
key(n) |
用于訪問(wèn)第n個(gè)key的名稱 |
|
clear() |
清除當(dāng)前域下的所有l(wèi)ocalSotrage內(nèi)容 |
代碼示例：
<!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ū)域存儲(chǔ)，區(qū)域存儲(chǔ)是指數(shù)據(jù)只在單個(gè)頁(yè)面的會(huì)話期內(nèi)有效。由于 sessionStroage 也是 Storage 的實(shí)例， sessionStroage 與 localStorage 中的方法基本一致，唯一區(qū)別就是存儲(chǔ)數(shù)據(jù)的生命周期不同， locaStorage 是永久性存儲(chǔ)，而 sessionStorage 的生命周期與會(huì)話保持一致，會(huì)話結(jié)束時(shí)數(shù)據(jù)消失。
2.3sessionStorage實(shí)現(xiàn)區(qū)域存儲(chǔ)
從硬件方面理解， localStorage 的數(shù)據(jù)是存儲(chǔ)子在硬盤中的，關(guān)閉瀏覽器時(shí)數(shù)據(jù)仍然在硬盤上，再次打開(kāi)瀏覽器仍然可以獲取，而 sessionStorage 的數(shù)據(jù)保存在瀏覽器的內(nèi)存中，當(dāng)瀏覽器關(guān)閉后，內(nèi)存將被自動(dòng)清除，需要注意的是， sessionStorage 中存儲(chǔ)的數(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;
// 定義一個(gè) user 對(duì)象用來(lái)保存獲取的信息
var user = {
username: username,
age: age
}
// 使用 stringify() 將 JSON 對(duì)象序列號(hào)并存入到 sessionStorage
window.sessionStorage.setItem("user",JSON.stringify(user));
};
//sessionStorage 里面存儲(chǔ)數(shù)據(jù)，如果關(guān)閉了瀏覽器，數(shù)據(jù)就會(huì)消失 ..
// 單個(gè)瀏覽器窗口頁(yè)面有效
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>
3 總結(jié)
HTML5中的兩種存儲(chǔ)方式都比較實(shí)用，我們?cè)谠O(shè)計(jì)前端頁(yè)面時(shí)，可以根據(jù)相應(yīng)的用戶訪問(wèn)情況預(yù)測(cè)來(lái)增添相應(yīng)的js，既增加了用戶瀏覽的體驗(yàn)，又能實(shí)現(xiàn)存儲(chǔ)管理的高效性，合理的利用存儲(chǔ)空間。
到此這篇關(guān)于HTML5中的網(wǎng)絡(luò)存儲(chǔ)的文章就介紹到這了,更多相關(guān)html5 網(wǎng)絡(luò)存儲(chǔ)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
標(biāo)簽：青島 池州 漯河 遼源 西藏 棗莊 永州 新疆
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5中的網(wǎng)絡(luò)存儲(chǔ)實(shí)現(xiàn)方式》，本文關(guān)鍵詞 HTML5,中的,網(wǎng)絡(luò),存儲(chǔ),實(shí)現(xiàn),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。