“ 最近學(xué)習(xí)了一下關(guān)于web應(yīng)用的本地儲(chǔ)存，一個(gè)簡(jiǎn)單的例子就是平時(shí)在登陸界面的“是否保存密碼”，所以主要列出實(shí)現(xiàn)的腳本以及學(xué)習(xí)中遇到的問(wèn)題”
背景：
本地存儲(chǔ)：包括web-Storage和本地?cái)?shù)據(jù)庫(kù)，其中web-Storage包括localStorage和sessionStorage。localStorage是可以永久保存在客戶端的，sessionStorage僅僅是在一個(gè)會(huì)話中進(jìn)行保存。
腳本：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
ul {list-style-type:none;padding:3px 6px;}
li {margin:6px;}
.li_title {margin-top:12px;}
.status {border:1px solid #000000;background:#CCCCCC;padding:6px;padding:4px}
div {margin:150px;text-align:center;}
</style>
<title></title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function pageload() {
var strName = localStorage.getItem("keyName");
var strPass = localStorage.getItem("keyPass");
if (strName) {
$("txtName").value = strName;
}
if (strPass) {
$("txtPass").value = strPass;
}
}
//當(dāng)輸入用戶名和密碼之后，點(diǎn)擊了提交按鈕，則進(jìn)行下面函數(shù)。將輸入的name和pass賦值給變量strName,strPass
function btn_click() {
var strName = $("txtName").value;
var strPass = $("txtPass").value;
localStorage.setItem("keyName",strName);
if ($("checkSave").checked) {
localStorage.setItem("keyPass",strPass);
} else{
localStorage.removeItem("keyPass");
}
$("spnStatus").className = "status";
$("spnStatus").innerHTML = "登陸成功";
}
</script>
</head>
<body onload="pageload()">
<div>
<form id = "frmLogin" style="width:400px;height:250px">
<fieldset>
<legend>用戶登陸</legend>
<ul>
<li>用戶名：<input id = "txtName" class = "inputtxt" type="text"></li>
<li>密 碼：<input id = "txtPass" class = "inputtxt" type="text"></li>
<li><input id = "checkSave" type="checkbox">是否保存密碼</li>
<li>
<input name="btn" class = "inputbtn" value="登陸" type="button" onclick="btn_click()">
<input name="reset" class="inputbtn" value="取消" type="reset">
</li>
<li class = "li_title"><span id = "spnStatus"></span></li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
代碼詳解：
學(xué)習(xí)過(guò)程中，個(gè)人是先寫(xiě)<body>里的內(nèi)容，在逐漸補(bǔ)充<script>的內(nèi)容。在<body>中用到了HTML5中input的多種類型：text文本域、checkbox復(fù)選框、button可點(diǎn)擊按鈕以及reset重置按鈕。
-
<body>區(qū)的內(nèi)容顯示在頁(yè)面上，如下圖所示。
image <script>的內(nèi)容中，pageload()函數(shù)代表每次打開(kāi)頁(yè)面時(shí)，就調(diào)用這個(gè)函數(shù)，然后從localStorage獲取keyName和keyPass對(duì)應(yīng)的值，如果不存在，則不進(jìn)行任何操作。如果localStorage中有儲(chǔ)存的用戶名和密碼，就自動(dòng)填充(設(shè)置默認(rèn)值)。
當(dāng)?shù)谝淮芜\(yùn)行腳本的時(shí)候，localStorage是沒(méi)有儲(chǔ)存賬戶密碼信息的，所以不會(huì)自動(dòng)填充，點(diǎn)擊“登陸”按鈕之后，觸發(fā)btn_click()函數(shù), 此處還有一個(gè)判斷，就是是否勾選了“是否保存密碼” ,若勾選了保存密碼，就將輸入的用戶名和密碼保存在localStorage,通過(guò)localStorage.setItem()完成。
遇到的問(wèn)題：
- src不能寫(xiě)本地絕對(duì)路徑
上一個(gè)例子中沒(méi)有用到src屬性，在下面添加字幕中用到，代表引用文件的路徑，路徑必須寫(xiě)參照于當(dāng)前的xx.html文件的相對(duì)路徑。直接寫(xiě)本地的絕對(duì)路徑則無(wú)法顯示。
- 關(guān)于input的value
不同input類型，value的意義也不一樣。例如type = "text"類型的<input>的兩種用法：
第一種：a=document.getElementById(id).value
第二種：document.getElementById(id).value="a"
value屬性值包括默認(rèn)值或者用戶輸入的值。在保存密碼的腳本中，分別用第一種方法返回了用戶的輸入值并進(jìn)行儲(chǔ)存，以及第二種方法填充默認(rèn)值。
對(duì)于type = "button"來(lái)說(shuō)，value的屬性值代表按鈕上的內(nèi)容。
- button和submit的區(qū)別
submit是特殊的button,button是普通按鈕，常與觸發(fā)事件連在一起，submit是提交按鈕，有提交表單form的功能，與form的action屬性聯(lián)系在一起。
為視頻加字幕
為了展示上面"保存密碼"的效果，進(jìn)行了錄屏，所以順手在寫(xiě)個(gè)腳本加上字幕吧～
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video width = "800" height = "500" controls = "controls">
<source src = "screenrecorder.mp4" />
<track kind = "subtitles" src="./test.vtt" srclang="zh" label="zh">
</video>
</body>
</html>
test.vtt內(nèi)容：
主要就是注意vtt文件的格式,line代表距離頂端的百分比
