“ 最近学习了一下关于web应用的本地储存，一个简单的例子就是平时在登陆界面的“是否保存密码”，所以主要列出实现的脚本以及学习中遇到的问题”
image
背景：
本地存储：包括web-Storage和本地数据库，其中web-Storage包括localStorage和sessionStorage。localStorage是可以永久保存在客户端的，sessionStorage仅仅是在一个会话中进行保存。
脚本：
<!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;
}
}
//当输入用户名和密码之后，点击了提交按钮，则进行下面函数。将输入的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>
代码详解：
-
学习过程中，个人是先写<body>里的内容，在逐渐补充<script>的内容。在<body>中用到了HTML5中input的多种类型：text文本域、checkbox复选框、button可点击按钮以及reset重置按钮。
-
<body>区的内容显示在页面上，如下图所示。
image
-
<script>的内容中，pageload()函数代表每次打开页面时，就调用这个函数，然后从localStorage获取keyName和keyPass对应的值，如果不存在，则不进行任何操作。如果localStorage中有储存的用户名和密码，就自动填充(设置默认值)。
-
当第一次运行脚本的时候，localStorage是没有储存账户密码信息的，所以不会自动填充，点击“登陆”按钮之后，触发btn_click()函数, 此处还有一个判断，就是是否勾选了“是否保存密码” ,若勾选了保存密码，就将输入的用户名和密码保存在localStorage,通过localStorage.setItem()完成。
遇到的问题：
- src不能写本地绝对路径
上一个例子中没有用到src属性，在下面添加字幕中用到，代表引用文件的路径，路径必须写参照于当前的xx.html文件的相对路径。直接写本地的绝对路径则无法显示。
- 关于input的value
不同input类型，value的意义也不一样。例如type = "text"类型的<input>的两种用法：
第一种：a=document.getElementById(id).value
第二种：document.getElementById(id).value="a"
value属性值包括默认值或者用户输入的值。在保存密码的脚本中，分别用第一种方法返回了用户的输入值并进行储存，以及第二种方法填充默认值。
对于type = "button"来说，value的属性值代表按钮上的内容。
- button和submit的区别
submit是特殊的button,button是普通按钮，常与触发事件连在一起，submit是提交按钮，有提交表单form的功能，与form的action属性联系在一起。
为视频加字幕
为了展示上面"保存密码"的效果，进行了录屏，所以顺手在写个脚本加上字幕吧～
<!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内容：
主要就是注意vtt文件的格式,line代表距离顶端的百分比
image
网友评论