溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html5的本地存儲功能是什么意思，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在html5中，本地存儲是一種讓網頁可以把鍵值對存儲在用戶瀏覽器客戶端的方法。通過本地存儲，web應用程序能夠在用戶瀏覽器中對數據進行本地的存儲。
本教程操作環境：windows7系統、HTML5版、Dell G3電腦。
本地存儲（LocalStorage）是一種讓網頁可以把鍵值對存儲在用戶瀏覽器客戶端的方法；通過本地存儲，web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲。
html本地存儲：優于cookies
在 HTML5 之前，應用程序數據只能存儲在 cookie 中，包括每個服務器請求。本地存儲則更安全，并且可在不影響網站性能的前提下將大量數據存儲于本地。
與 cookie 不同，存儲限制要大得多（至少5MB），并且信息不會被傳輸到服務器。
本地存儲經由起源地（origin）（經由域和協議）。所有頁面，從起源地，能夠存儲和訪問相同的數據。
關于html5的本地儲存對象：
window.localStorage 存儲永久數據
window.sessionStorage 針對一個 session 來存儲數據（當瀏覽器關閉，儲存的數據將會清除）
模擬淘寶搜索，對本地數據進行儲存?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#all {
width: 600px;
margin: 100px auto 0px;
position: relative;
}
#all input {
float: left;
width: 500px;
height: 30px;
outline: none;
text-indent: 5px;
border-radius: 15px 0px 0px 15px;
border: 1px solid #ccc;
}
#all button {
float: left;
width: 80px;
height: 32px;
border: none;
color: #fff;
outline: none;
border-radius: 0px 16px 16px 0px;
background-color: orange;
}
#show {
width: 490px;
position: absolute;
left: 10px;
top: 30px;
border: 1px solid #ccc;
border-top: none;
display: none;
}
#show p {
padding-left: 10px;
line-height: 20px;
color: orange;
font-size: 13px;
padding-right: 10px;
}
#show p a {
text-decoration: none;
float: right;
}
</style>
</head>
<body>
<div id="all">
<input type="text" id="text">
<button id="enter">淘寶搜索</button>
<div id="show">
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var text = $("#text");
var enter = $("#enter");
var show = $("#show");
var data = localStorage.getItem("historyData") || "[]";
var dataArr = JSON.parse(data);
var init = function () {
if (dataArr.length == 0){
show.hide();
return;
}
show.html("");
$(dataArr).each(function (index, item) {
$("<p></p>").text(item).prependTo(show).append($("<a href='javascript:;'></a>").text("刪除").attr("index", index));
});
}
text.focus(function () {
init();
if(dataArr!=0)show.show();
});
enter.click(function () {
var val = text.val().trim();
if (val.length == 0) return;
dataArr.push(val);
localStorage.setItem("historyData", JSON.stringify(dataArr));
text.val("");
init();
});
$("#show").on("click", "a", function () {
var index = $(this).attr("index");
dataArr.splice(index, 1);
localStorage.setItem("historyData", JSON.stringify(dataArr));
init();
});
</script>
</body>
</html>最終效果圖：
關于“html5的本地存儲功能是什么意思”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
