您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)html5的本地存儲(chǔ)功能是什么意思,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在html5中,本地存儲(chǔ)是一種讓網(wǎng)頁可以把鍵值對(duì)存儲(chǔ)在用戶瀏覽器客戶端的方法。通過本地存儲(chǔ),web應(yīng)用程序能夠在用戶瀏覽器中對(duì)數(shù)據(jù)進(jìn)行本地的存儲(chǔ)。
本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。
本地存儲(chǔ)(LocalStorage)
是一種讓網(wǎng)頁可以把鍵值對(duì)存儲(chǔ)在用戶瀏覽器客戶端的方法;通過本地存儲(chǔ),web 應(yīng)用程序能夠在用戶瀏覽器中對(duì)數(shù)據(jù)進(jìn)行本地的存儲(chǔ)。
html本地存儲(chǔ):優(yōu)于cookies
在 HTML5 之前,應(yīng)用程序數(shù)據(jù)只能存儲(chǔ)在 cookie 中,包括每個(gè)服務(wù)器請(qǐng)求。本地存儲(chǔ)則更安全,并且可在不影響網(wǎng)站性能的前提下將大量數(shù)據(jù)存儲(chǔ)于本地。
與 cookie 不同,存儲(chǔ)限制要大得多(至少5MB),并且信息不會(huì)被傳輸?shù)椒?wù)器。
本地存儲(chǔ)經(jīng)由起源地(origin)(經(jīng)由域和協(xié)議)。所有頁面,從起源地,能夠存儲(chǔ)和訪問相同的數(shù)據(jù)。
關(guān)于html5的本地儲(chǔ)存對(duì)象:
window.localStorage
存儲(chǔ)永久數(shù)據(jù)
window.sessionStorage
針對(duì)一個(gè) session 來存儲(chǔ)數(shù)據(jù)(當(dāng)瀏覽器關(guān)閉,儲(chǔ)存的數(shù)據(jù)將會(huì)清除)
模擬淘寶搜索,對(duì)本地?cái)?shù)據(jù)進(jìn)行儲(chǔ)存?
<!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>
最終效果圖:
關(guān)于“html5的本地存儲(chǔ)功能是什么意思”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(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)容。