首页 > 代码库 > web存储
web存储
localStorage 对象存储的数据没有时间限制。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
将用户名和密码保存到localstorage中，在页面展示
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {text-align: center;}
</style>
</head>
<body>
<label for="">用户名：</label><input type="text" id="username" /><br>
<label for="">密 码：</label><input type="password" id="password" /><br>
<button onclick="btn()">保存</button><button onclick="del()">清空用户信息</button>
<div id="table-box" style="display: none;">
<table border="1" cellpadding="0" cellspacing="0" id="table" width="300" >
<caption>用户信息表</caption>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
</table>
</div>
<script>
window.onload = function() { //读取缓存
var str = ""; var Text = localStorage.getItem("T");
Text = JSON.parse(Text); //把字符串转换成JSON对象
if(Text != null) { //localStorage不为空
show() var objs = Text.te; for(var i = 0; i < objs.length; i++) {
str += "<tr><td>" + (i + 1) + "</td><td>" + objs[i].name + "</td><td>" + objs[i].pd + "</td><td><button onclick=‘del_one("+objs[i].name+")‘>删除</button></td></tr>";
}
document.getElementById("table").innerHTML += str;
}
} function btn() { //存入缓存
var u = document.getElementById("username").value; var b = document.getElementById("password").value; if(u != ‘‘ && b != ‘‘) {
add(u, b)
}
} function add(a, b) { //设置缓存
var Save = false; var Index = table.rows.length; var Text = localStorage.getItem("T");
Text = JSON.parse(Text); //将一个 JSON 字符串转换为对象。
if(Text != null && Text != "underfind") { var objs = Text.te; for(var i = 0; i < objs.length; i++) { //遍历缓存
Save = false; if(objs[i].name == a) { //统计缓存中相同数据个数
alert("用户名已存在")
Save = true; break;
}
} if(!Save) { //如果条件为真，则执行
var str = "<tr><td>" + (Index) + "</td><td>" + a + "</td><td>" + b + "</td><td><button onclick=‘del_one("+a+")‘>删除</button></td></tr>";
document.getElementById("table").innerHTML += str;
objs[objs.length] = {
num: Index,
name: a,
pd: b
};
}
} else {
show() var str = "<tr><td>" + (Index) + "</td><td>" + a + "</td><td>" + b + "</td><td><button onclick=‘del_one("+a+")‘>删除</button></td></tr>";
document.getElementById("table").innerHTML += str; var Text = { //要存储的JSON对象
te: [{
num: Index,
name: a,
pd: b
}]
}
}
Text = JSON.stringify(Text); //将JSON对象转化成字符串
localStorage.setItem("T", Text); //用localStorage保存转化好的的字符串
document.getElementById("username").value = ‘‘;
document.getElementById("password").value = ‘‘;
} function del() { //清空缓存
localStorage.clear();
window.location.reload();
} function show(){
document.getElementById("table-box").style.display ="block";
} function del_one(event){
var Text = localStorage.getItem("T");
Text = JSON.parse(Text); //把字符串转换成JSON对象
var objs = Text.te; for(var i = 0; i < objs.length; i++) { if(objs[i].name == event) { //说明存在该用户
objs.splice(i, 1); //删除某一条数据
Text = JSON.stringify(Text); //将JSON对象转化成字符串
localStorage.setItem("T", Text); //用localStorage保存转化好的的字符串
}
} if(objs.length == "0"){localStorage.clear();}
window.location.reload();
} </script>
</body></html>web存储
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。