AppCan用cookie实现记住密码功能 [APP]
今天想做个在应用上记住密码的功能。想了一下，先用COOKIE来测试。COOKIE保存在客户端。
关于COOKIE在手机上安不安全的问题，以后再讨论。
其实想过在手机上创建文件保存密码，但是，没有时间，没有COOKIE来得容易。
下面正题：
先做出要测试的界面，如下示：
界面源码如下：
<body class="ui-mobile-viewport" onload="useCookie()">
<!--header开始-->
<!--header结束-->
<div id="page_0" class="ui-page ui-body-d ui-page-active" tabindex="0">
<!--content开始-->
<div class="ui-content ui-body-d ui-fixed-top ui-fixed-bottom">
<!--文本输入开始-->
<input name="username" id="username" type="text" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-btn-a"/>
<!--文本输入结束-->
<!--文本输入开始-->
<input name="password" id="password" type="text" value="" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-btn-a"/>
<!--文本输入结束-->
<!--复选框开始-->
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="ui-hide"><label class="ui-checkbox ui-btn ui-btn-icon-right ui-corner-all ui-btn-a"><label class="ui-icon ui-icon-checkbox ui-icon-shadow"></label><span id="ck" class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">记住密码</span></span></label>
<!--复选框结束-->
<div data-role="button" id="btn1" class=" ui-corner-all ui-btn ui-btn-a ui-shadow" onclick="checksave()"> <span class="ui-btn-inner ui-corner-all"> <span class="ui-btn-text">设置</span> </span></div>
<div data-role="button" id="getcookie" class=" ui-corner-all ui-btn ui-btn-b ui-shadow" onclick="delusr()"> <span class="ui-btn-inner ui-corner-all"> <span class="ui-btn-text">删除</span> </span></div>
<div data-role="button" id="getcookie" class=" ui-corner-all ui-btn ui-btn-b ui-shadow" onclick="reload()"> <span class="ui-btn-inner ui-corner-all"> <span class="ui-btn-text">刷新</span> </span></div>
</div>
</div>
<!--content结束-->
<!--footer开始-->
<!--footer结束-->
</body>
好了，一般当别人选择了记住密码，第二次开启软件的时候，都会看到用户名，密码都填好的了。就是写个onload()事件而已。
<body class="ui-mobile-viewport" onload="useCookie()">触发的useCookie() 的js代码如下：
function useCookie()
{
var username=getCookie("username");
//alert(username);
var password=getCookie("password");
//alert(password);
if(username!=null && password!=null){
document.getElementById("username").value =username;
document.getElementById("password").value =password;
document.getElementById("checkbox-1").checked=true;
}else{
document.getElementById("username").value =null;
document.getElementById("password").value =null;
//alert("no data");
}
}
会调用到的方法已用红色标明，js代码如下：
function getCookie(NameOfCookie)
{
if (document.cookie.length > 0){
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1){
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;// cookie不存在返回null
}
这样在开启软件的时候，就去读存不存在的COOKIE，读到了，就赋值给输入框。
接下来，考虑输入用户名密码后，设置COOKIE，代码如下：
function checksave()
{
var name=document.getElementById('username').value;
var pass=document.getElementById('password').value;
if(name && pass){
setCookie("password",pass);
setCookie("username",name);
alert('success!');
location.reload();
}
else
alert("no input all!");
}
function setCookie(NameOfCookie, value, expiredays)
{ //var psw=document.getElementById('password').value;
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) +
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
alert("u+p="+unescape(document.cookie));
}
输入数据，点击界面的设置按钮后:
此时会刷新界面，但是已经记住了密码，结果如下：
删除按钮的代码：
function delusr()
{
delCookie("username");
delCookie("password");
location.reload();
}
function delCookie (NameOfCookie)
{
if (getCookie(NameOfCookie)) {
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie = NameOfCookie + "=" + "; expires="+date.toGMTString();
}
}
更新按钮的代码：
function reload ()
{
location.reload();
}
这个功能就到这里。“记住密码”这个checkbox的代码我写在其它文件里，这里没有，判断它的真假就可以做出功能。
在做这个功能时，我一开始是利用SAE做服务器端，来做记住密码功能的。在手机上测试，学校的信号非常不给力，所以开启软件后完全获取不到信息。所以网络信号在做应用时也应该要考虑。
然后，假如真的是密码功能用COOKIE来做，密码的加密是必要的，可以选择异步通讯到远程加密后返回密码保存，甚至写个自己的加密函数等等，可以做足多方面的安全保护。
做个“下次自动登录”功能，其实也很简单。
当你想要做某功能时，先想想它的逻辑是什么，它需要哪些介质来做功能支持，然后它可能可以用什么技术实现。这些东西想多了，做多了，你就进步了。写代码写的就是写个逻辑。后期你得不停地为你的代码做优化，不停地想它究竟安不安全。
有什么问题留言讨论吧。