溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個(gè)索引的key：localStorage.key(index);
<!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" >
<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); //把字符串轉(zhuǎn)換成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) { //設(shè)置緩存
var Save = false;
var Index = table.rows.length;
var Text = localStorage.getItem("T");
Text = JSON.parse(Text); //將一個(gè) JSON 字符串轉(zhuǎn)換為對象。
if(Text != null && Text != "underfind") {
var objs = Text.te;
for(var i = 0; i < objs.length; i++) { //遍歷緩存
Save = false;
if(objs[i].name == a) { //統(tǒng)計(jì)緩存中相同數(shù)據(jù)個(gè)數(shù)
alert("用戶名已存在")
Save = true; break;
}
}
if(!Save) { //如果條件為真，則執(zhí)行
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對象轉(zhuǎn)化成字符串
localStorage.setItem("T", Text); //用localStorage保存轉(zhuǎn)化好的的字符串
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); //把字符串轉(zhuǎn)換成JSON對象
var objs = Text.te;
for(var i = 0; i < objs.length; i++) {
if(objs[i].name == event) { //說明存在該用戶
objs.splice(i, 1); //刪除某一條數(shù)據(jù)
Text = JSON.stringify(Text); //將JSON對象轉(zhuǎn)化成字符串
localStorage.setItem("T", Text); //用localStorage保存轉(zhuǎn)化好的的字符串
}
}
if(objs.length == "0"){localStorage.clear();}
window.location.reload();
}
</script>
</body>
</html>免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼