html5超簡單的localStorage實(shí)現(xiàn)記住密碼的功能實(shí)現(xiàn)
發(fā)布時間：2017-09-07 17:10:57 作者：貓屎咖啡 
我要評論
我要評論這篇文章主要介紹了html5超簡單的localStorage實(shí)現(xiàn)記住密碼的功能實(shí)現(xiàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：
- localStorage - 沒有時間限制的數(shù)據(jù)存儲
- sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲，因?yàn)樗鼈冇擅總€對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。
對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。
HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。
localStorage 方法存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后，數(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5 LocalStorage 本地存儲詳細(xì)概括（多圖）
這篇文章主要介紹了HTML5 LocalStorage 本地存儲，給標(biāo)簽元素添加屬性和瀏覽器兼容性都做了詳細(xì)概括，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一2017-08-18html5 localStorage本地存儲_動力節(jié)點(diǎn)Java學(xué)院整理
localStorage 即本地存儲，可用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去除2017-07-06html5中l(wèi)ocalStorage本地存儲的簡單使用
我們在做頁面時會用到本地存儲的時候，今天說說localStorage本地存儲。感興趣的朋友一起學(xué)習(xí)吧2017-06-16
localstorage在瀏覽器的API有兩個：localStorage和sessionStorage，存在于window對象中：localStorage對應(yīng)window.localStorage，sessionStorage對應(yīng)window.sessionStorage2017-05-09- html5的兩種存儲技術(shù)的最大區(qū)別就是生命周期，接下來通過本文給大家分享HTML5 LocalStorage 本地存儲刷新值還在問題以及使用方法小結(jié)，需要的的朋友參考下本文吧2017-03-10
- 在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作為本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間為4k)，localStorage2017-02-22
Html5中l(wèi)ocalStorage存儲JSON數(shù)據(jù)并讀取JSON數(shù)據(jù)的實(shí)現(xiàn)方法
localStorage是HTML5提供的再客戶端實(shí)現(xiàn)本地存儲的一種方法，但是localStorage方法只能存儲字符串?dāng)?shù)據(jù)，有時候我們需要存儲對象到本地比如：JSON；那么，localStorage怎么2017-02-13- 本篇文章主要介紹了HTML5 LocalStorage 本地存儲 ，HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲到你本地的計(jì)算機(jī)上，并再以后需要的時候進(jìn)行獲取。有興趣的可以了解2016-12-23
- 這篇文章主要介紹了html5本地存儲 localStorage操作使用詳解的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-20
- 下面小編就為大家?guī)硪黄狧TML5 本地存儲 LocalStorage詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-24
