我们在做登录的时候最常见的一个问题就是登录进去以后显示的是登录人的名字，这个时候很麻烦的问题是只要用户刷新页面，这个时候他的名字就没有了，很多的时候我们用cookie是可以解决的，包括到现在也有很多的公司是这样处理的，这样处理是不是有问题呢？不是的，只是cookie大小只有4KB，那么这个时候如果是很少的数据是可以的，但是一旦数据量大了，这个时候cookie就不行了，这个时候就需要一种新的离线缓存技术：localStorage
废话不多说，举个例子：
这个是非常简单的一个登录的界面，代码是这样的：
代码语言：javascript复制 <form class="am-form" action="../main/main.html" method="">
<h1>欢迎进入科研平台</h1>
<fieldset>
<div class="am-form-group">
<input type="text" id="doc-ipt-text-1" placeholder="手机号" name="loginphone">
</div>
<div class="am-form-group">
<input type="password" id="doc-ipt-pwd-1" placeholder="密码" name="loginpwd">
</div>
<p><button type="button" class="am-btn am-btn-default" id="checklogin">账号密码登陆</button></p>
</fieldset>
</form>这个是用bootstrap做的一个简答的登录界面，一般的流程是用户注册以后将用户名和密码输入进去，点击登录就是可以了，然后主页就会显示这个人的信息，例如这样：
主页显示：
ok基本就是这样的，代码是这样的：
代码语言：javascript复制 /*登录的ajax*/
$("#checklogin").click(function () {
var loginphone = $("[name='loginphone']").val();
var loginpwd = $("[name='loginpwd']").val();
/*//layer.alert("shouji" loginphone);*/
if (loginphone == "" || loginphone.length != 11) {
layer.msg("手机号错误！");
return false;
}
else {
if (loginpwd == "") {
layer.msg("密码不可以为空！");
return false;
}
else {
$.ajax({
type: "post",
url: "/login",
data: {
accounts: loginphone,
password: loginpwd
},
dataType: "json",
async: false,
success: function (data) {
if (data.code == 200) {
layer.msg('登录成功！', {}, function () {
localStorage.setItem("account", data.data);
//跳转的URL重定向到新的页面，这里是直接跳转到系统主页
window.kk = 'main.html';
});
} else if (data.code == 400) {
layer.msg("登录失败！");
}
}
});
}
}
})localStorage.setItem("account", data.data);这个将用户的信息放到离线缓存的地方登录进去以后呢将数据取出来，代码是这样的：
代码语言：javascript复制 window.onload = function () {
/*拿到用户的名字通过localStorage显示到页面上*/
var account = localStorage.getItem("account");
$("#account").append(account);
}这里的account是页面元素的id，代码是这样的：
代码语言：javascript复制<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="personal_homepage.html">个人中心</a></li>
<li><a href="../system/registered.html">注册</a></li>
<li><a id="account"></a></li>
<li><a href="/signOut">退出</a></li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><a href="project_init.html">发布项目申请</a></li>
<li><a href="projects_participated.html">已参与项目</a></li>
<li><a href="projects_possible.html">可以参与项目</a></li>
<li><a href="case_report.html">病例上报</a></li>
</ul>
</div>这里是引用的bootstrap的组件
ok总结一下就是：
代码语言：javascript复制localStorage.setItem();是存放数据localStorage.getItem();是取数据 
