在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
localStorage的优势与局限
localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。
页面源码
<!DOCTYPE html>
<html class="ui-page-login">
<head>
<meta charset="utf-8">
<meta name="viewport"/>
<meta name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<div class="tupian">
<img src="img/WuLing.png" style="width: 250px; height:250px;"/>
</div>
<form id='login-form' class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id='PhoneNum' type="text" class="mui-input-clear" placeholder="请输入账号">
</div>
<div class="mui-input-row mui-password">
<label>密码</label>
<input id='PassWord' type="password" class="mui-input-password" placeholder="请输入密码">
</div>
</form>
<div class="mui-content-padded">
<button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$("#login").click(function(){
//获取账号密码
var cname = document.getElementById("PhoneNum").value.trim();
var pwd = document.getElementById("PassWord").value.trim();
//判断用户密码是否为空
if(cname.trim().length == 0) {
mui.toast("用户名不能为空!")
return;
} else if(pwd.trim().length == 0) {
mui.toast("密码不能为空!");
return;
} else {
//ajax请求 传data值到后台进行判断
$.ajax({
data: {
"cname": cname,
"pwd": pwd
},
url:'http://localhost:2562/APP/AppMain/AppDengLu',
type: 'get',
datatype:'json',
timeout:10000,//网络超时时间
success: function (data) {
if(data == "seccess")
{
remPwd();
mui.openWindow({
url: 'index.html',
id: 'index',
});
}else if(data == "falsess"){
alert("当前用户已过期")
}else{
alert("账号或者密码错误")
}
},
});
}
})
//将账号与密码保存到Localstore
function remPwd() {
var cname = document.getElementById("PhoneNum").value.trim();
var pwd = document.getElementById("PassWord").value.trim();
localStorage.setItem("PhoneNum", cname);
localStorage.setItem("PassWord", pwd);
}
页面加载数据
$(document).ready(function(){
var Num = localStorage.getItem("PhoneNum");
//判断是否有这个命名的缓存数据
if(Num != null) //如果缓存中有数据，则加载出来
{
document.getElementById("PhoneNum").value = Num;
document.getElementById("PassWord").value= ocalStorage.getItem("PassWord");
}
})
</script>
</body>
</html>