html5登录页面自动记住密码,HTML5之localStorage实现“是否保存密码”

中用到了HTML5中input的多种类型：text文本域、checkbox复选框、button可点击按钮以及reset重置按钮。

区的内容显示在页面上，如下图所示。

image

当第一次运行脚本的时候，localStorage是没有储存账户密码信息的，所以不会自动填充，点击“登陆”按钮之后，触发btn_click()函数, 此处还有一个判断，就是是否勾选了“是否保存密码” ,若勾选了保存密码，就将输入的用户名和密码保存在localStorage,通过localStorage.setItem()完成。

遇到的问题：

src不能写本地绝对路径

上一个例子中没有用到src属性，在下面添加字幕中用到，代表引用文件的路径，路径必须写参照于当前的xx.html文件的相对路径。直接写本地的绝对路径则无法显示。

关于input的value

不同input类型，value的意义也不一样。例如type = "text"类型的的两种用法：

第一种：a=document.getElementById(id).value

第二种：document.getElementById(id).value="a"

value属性值包括默认值或者用户输入的值。在保存密码的脚本中，分别用第一种方法返回了用户的输入值并进行储存，以及第二种方法填充默认值。

对于type = "button"来说，value的属性值代表按钮上的内容。

button和submit的区别

submit是特殊的button,button是普通按钮，常与触发事件连在一起，submit是提交按钮，有提交表单form的功能，与form的action属性联系在一起。

为视频加字幕

为了展示上面"保存密码"的效果，进行了录屏，所以顺手在写个脚本加上字幕吧～

Title