您的位置：首页 > Web前端 > HTML5

HTML5 Web存储 sessionStorage localStorage

2016-08-11 10:03 387 查看

sessionStorage :浏览器关闭会清除

localStorage：长时间保存

api一致：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
</head>
<body>
姓名：<input type="text" id="userName"><br>
手机号：<input type="text" id="userPhone"><br>
<input type="button" id="save" onclick="save()" value="保存"><br>
<input type="text" id="findOfPhone" placeholder="输入手机号查询："><br>
<input type="button" value="查询"  onclick="find()">
<div id="findShow"></div>
<input type="button" value="查询所有"  onclick="findAll()"><br>
<div id="findAllDiv"></div>
<input type="button" onclick="clearTest()" value="清除所有">
<script>
function save(){
var userName=$("#userName").val();
var userPhone=$("#userPhone").val();
localStorage.setItem(userName,userPhone);//存储的信息不能跨浏览器
}
function  find(){
var key=$("#findOfPhone").val();
var context=localStorage.getItem(key);
$("#findShow").html(context+"<br>"+$("#findShow").html())
}
function  findAll(){
if(localStorage.length<=0){
alert("数据为空")
}else {
var str="";
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var context=localStorage.getItem(key);
str+=context+"<br>";

}
$("#findAllDiv").html(str);
}
}

$("#findOfPhone").keyup(function () {
find();
})
function  clearTest(){
localStorage.clear();
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 存储 web

相关文章推荐

新的分享

章节导航