HTML5本地存储之Web Storage篇
代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style type="text/css">
#header{
width: 500px;
margin: 0 auto;
border: 1px solid darkgoldenrod;
text-align: center;
}
#result{
width: 500px;
margin: 0 auto;
text-align: center;
}
#result table {
border: 1px solid #B8860B;
width: 500px;
}
#result table tr td,#result table tr th{
border: 1px solid #B8860B;
}
</style>
</head>
<body>
<div id="header">
<div id="add">
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text" />
<br/>
<label for="siteurl">网 址(value)：</label>
<input type="text" id="siteurl" name="siteurl" />
<br/>
<input type="button" onclick="save()" value="新增记录" />
<hr/>
</div>
<div id="find">
<label for="findsite">输入网站名：</label>
<input type="text" id="findsite" name="findsite" />
<input type="button" onclick="find()" value="查找网站" />
<p id="find_result"><br/></p>
</div>
</div>
<div id="result">
<table id="tab" cellpadding="0" cellspacing="0">
</table>
</div>
<script type="text/javascript">
// 添加
function save(){
var sitename=$("#sitename").val();
var siteurl=$("#siteurl").val();
localStorage.setItem(sitename,siteurl);
alert("添加成功");
$("#sitename").val("");
$("#siteurl").val("");
loadData();
}
function find(){
var findsite=$("#findsite").val();
var siteurl=localStorage.getItem(findsite);
$("#find_result").html(findsite+"网站的地址是："+siteurl);
}
// 加载数据
function loadData(){
var tab=$("#tab");
tab.empty();
tab.append($("<tr><th>网站名称</th><th>网站地址</th><th>操作</th></tr>"));
if(localStorage.length>0){
// 显示数据
for(var i=0;i<localStorage.length;i++){
var sitename=localStorage.key(i);
var siturl=localStorage.getItem(sitename);
var tr=$("<tr><td>"+sitename+"</td><td>"+siturl+"</td><td><a href='#' onclick='updRow(this)' >修改</a> <a href='#' onclick='delRow(this)'>删除</a></td></tr>");
tab.append(tr);
}
}else{
$("<tr><td colspan='3'>没有数据！</td></tr>").appendTo(tab);
}
}
loadData();
// 删除
function delRow(th){
// 删除表面
//$(th).parent().parent().remove();
// 要删除数据
localStorage.removeItem($(th).parent().prev().prev().html());
loadData();
}
// 修改
function updRow(th){
// td里添加input
var value=$(th).parent().prev().html();
var input=$('<input type="text" value="'+value+'" />');
$(th).parent().prev().html("").append(input);
// 修改按钮变保存
$(th).html("保存").attr("onclick","saveRow(this)");
}
function saveRow(th){
var sitename=$(th).parent().prev().prev().html();
var siteurl=$(th).parent().prev().children().val();
localStorage.setItem(sitename,siteurl);
// 保存按钮变修改
$(th).html("修改").attr("onclick","updRow(this)");
$(th).parent().prev().html(siteurl);
}
</script>
</body>
代码就是这样
接下来是存储对象过程
效果图如下:
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5本地存储之Web Storage Json篇</title>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style type="text/css">
#header{
width: 500px;
margin: 0 auto;
border: 1px solid darkgoldenrod;
text-align: center;
}
#result{
width: 500px;
margin: 0 auto;
text-align: center;
}
#result table {
border: 1px solid #B8860B;
width: 500px;
}
#result table tr td,#result table tr th{
border: 1px solid #B8860B;
}
label{
display: inline-block;
width:120px;
text-align: right;
}
</style>
</head>
<body>
<div id="header">
<div id="add">
<label for="sitename">网站别名(key)：</label>
<input type="text" id="alias" name="alias" class="text" />
<br />
<label for="sitename">网站名：</label>
<input type="text" id="sitename" name="sitename" class="text" />
<br />
<label for="siteurl">网 址：</label>
<input type="text" id="siteurl" name="siteurl" />
<br/>
<input type="button" onclick="save()" value="新增记录" />
<hr/>
</div>
<div id="find">
<label for="findsite">输入网站名：</label>
<input type="text" id="findsite" name="findsite" />
<input type="button" onclick="find()" value="查找网站" />
<p id="find_result"><br/></p>
</div>
</div>
<div id="result">
<table id="tab" cellpadding="0" cellspacing="0">
</table>
</div>
<script type="text/javascript">
// 添加
var site = new Object;
function save(){
site.alias=$("#alias").val();
site.sitename=$("#sitename").val();
site.siteurl=$("#siteurl").val();
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.alias,str);
alert("添加成功");
$("#alias").val("");
$("#sitename").val("");
$("#siteurl").val("");
loadData();
}
function find(){
var findsite=$("#findsite").val();
var str=localStorage.getItem(findsite);
var site = JSON.parse(str);
$("#find_result").html(findsite+"正名叫"+site.sitename+"网站的地址是："+site.siteurl);
}
// 加载数据
function loadData(){
var tab=$("#tab");
tab.empty();
tab.append($("<tr><th>网站别名</th><th>网站名称</th><th>网站地址</th><th>操作</th></tr>"));
if(localStorage.length>0){
// 显示数据
for(var i=0;i<localStorage.length;i++){
var sitekey=localStorage.key(i);
var str=localStorage.getItem(sitekey);
var site = JSON.parse(str);
var tr=$("<tr><td>"+sitekey+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td><td><a href='#' onclick='updRow(this)' >修改</a> <a href='#' onclick='delRow(this)'>删除</a></td></tr>");
tab.append(tr);
}
}else{
$("<tr><td colspan='4'>没有数据！</td></tr>").appendTo(tab);
}
}
loadData();
// 删除
function delRow(th){
// 删除表面
//$(th).parent().parent().remove();
// 要删除数据
localStorage.removeItem($(th).parent().prev().prev().html());
loadData();
}
// 修改
function updRow(th){
// td里添加input
var value=$(th).parent().prev().html();
var input=$('<input type="text" value="'+value+'" />');
$(th).parent().prev().html("").append(input);
// 修改按钮变保存
$(th).html("保存").attr("onclick","saveRow(this)");
}
function saveRow(th){
var sitename=$(th).parent().prev().prev().html();
var siteurl=$(th).parent().prev().children().val();
localStorage.setItem(sitename,siteurl);
// 保存按钮变修改
$(th).html("修改").attr("onclick","updRow(this)");
$(th).parent().prev().html(siteurl);
}
</script>
</body>
</html>
写于2019年12月2号
153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
