html5超簡(jiǎn)單的localStorage實(shí)現(xiàn)記住密碼的功能實(shí)現(xiàn)
我要評(píng)論HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：
- localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。
對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問(wèn)其自身的數(shù)據(jù)。
HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪問(wèn)數(shù)據(jù)。
localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<style type="text/css">
form{
width: 300px;
padding: 10px 0px 20px 30px;
height:auto;
border-radius: 6px;
border-left:8px solid #19a049;
background:#eee;
margin:100px auto;
}
#user,#pass{
padding: 8px;
outline: none;
background: transparent;
border:1px solid #999;
margin-top: 5px;
}
#sub{
padding: 6px;
outline: none;
border:none;
background: #19a049;
color:#fff;
width: 150px;
border-radius: 6px;
cursor: pointer;
}
</style>
<body>
<form action="" method="" onsubmit="return loginBtn_click();">
<h3>Log in</h3>
<input type="text" name="user" placeholder="user" id="user">
<input type="password" name="pass" placeholder="password" id="pass">
<input type="checkbox" id="remember" checked><br/><br/>
<input type="submit" id="sub">
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
var strName = localStorage.getItem('keyName');
var strPass = localStorage.getItem('keyPass');
if(strName){
$('#user').val(strName);
}if(strPass){
$('#pass').val(strPass);
}
});
function loginBtn_click(){
var strName = $('#user').val();
var strPass = $('#pass').val();
localStorage.setItem('keyName',strName);
if($('#remember').is(':checked')){
localStorage.setItem('keyPass',strPass);
}else{
localStorage.removeItem('keyPass');
}
}
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5 LocalStorage 本地存儲(chǔ)詳細(xì)概括（多圖）
這篇文章主要介紹了HTML5 LocalStorage 本地存儲(chǔ)，給標(biāo)簽元素添加屬性和瀏覽器兼容性都做了詳細(xì)概括，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一2017-08-18html5 localStorage本地存儲(chǔ)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
localStorage 即本地存儲(chǔ)，可用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)去除2017-07-06html5中l(wèi)ocalStorage本地存儲(chǔ)的簡(jiǎn)單使用
我們?cè)谧鲰?yè)面時(shí)會(huì)用到本地存儲(chǔ)的時(shí)候，今天說(shuō)說(shuō)localStorage本地存儲(chǔ)。感興趣的朋友一起學(xué)習(xí)吧2017-06-16
localstorage在瀏覽器的API有兩個(gè)：localStorage和sessionStorage，存在于window對(duì)象中：localStorage對(duì)應(yīng)window.localStorage，sessionStorage對(duì)應(yīng)window.sessionStorage2017-05-09HTML5 LocalStorage 本地存儲(chǔ)刷新值還在
html5的兩種存儲(chǔ)技術(shù)的最大區(qū)別就是生命周期，接下來(lái)通過(guò)本文給大家分享HTML5 LocalStorage 本地存儲(chǔ)刷新值還在問(wèn)題以及使用方法小結(jié)，需要的的朋友參考下本文吧2017-03-10- 在HTML5中，新加入了一個(gè)localStorage特性，這個(gè)特性主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的，解決了cookie存儲(chǔ)空間不足的問(wèn)題(cookie中每條cookie的存儲(chǔ)空間為4k)，localStorage2017-02-22
Html5中l(wèi)ocalStorage存儲(chǔ)JSON數(shù)據(jù)并讀取JSON數(shù)據(jù)的實(shí)現(xiàn)方法
localStorage是HTML5提供的再客戶端實(shí)現(xiàn)本地存儲(chǔ)的一種方法，但是localStorage方法只能存儲(chǔ)字符串?dāng)?shù)據(jù)，有時(shí)候我們需要存儲(chǔ)對(duì)象到本地比如：JSON；那么，localStorage怎么2017-02-13詳解HTML5 LocalStorage 本地存儲(chǔ)
本篇文章主要介紹了HTML5 LocalStorage 本地存儲(chǔ) ，HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到你本地的計(jì)算機(jī)上，并再以后需要的時(shí)候進(jìn)行獲取。有興趣的可以了解2016-12-23html5本地存儲(chǔ) localStorage操作使用詳解
這篇文章主要介紹了html5本地存儲(chǔ) localStorage操作使用詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-20HTML5 本地存儲(chǔ) LocalStorage詳解
下面小編就為大家?guī)?lái)一篇HTML5 本地存儲(chǔ) LocalStorage詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-24
