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

HTML5的本地存储功能，使用localStorage

2016-12-05 18:22 676 查看

HTML文件内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>HTML5的本地存储功能，使用localStorage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>

<div class="container-fluid">
<div class="row header-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h1>使用localStorage存储数据</h1>
</div>
</div>

<div class="row container-row">

<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<h1 class="text-center">输入用户数据</h1><br>
<form class="form" name="user_form">
<input type="hidden" id="user_id" value="" />
<div class="form-group">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
<label>姓名:</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" id="user_name" class="form-control" placeholder="请输入用户的名称" />
</div>
</div>
<div class="form-group">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
<label>性别:</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<label class="radio-inline"><input type="radio" id="sex1" name="user_sex" value="0" />男</label>
<label class="radio-inline"><input type="radio" id="sex2" name="user_sex" value="1" />女</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
<label>年龄:</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" id="user_age" class="form-control" placeholder="请输入用户的年龄" />
</div>
</div>
<div class="form-group">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
<label>地址:</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" id="user_address" class="form-control" placeholder="请输入用户的地址" />
</div>
</div>
<div class="form-group">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
<label>手机号:</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" id="user_phone" class="form-control" placeholder="请输入用户的手机号" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right">
<button type="button" class="btn btn-warning" onclick="document.user_form.reset();document.getElementById('user_id').value='';">清空表单</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<button type="button" class="btn btn-info" onclick="save();">保存数据</button>
</div>
</div>
</form>
</div>

<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<div class="row text-center">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<h1 class="text-center">用户数据列表</h1><br>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<button type="button" class="btn btn-info" style="margin-top: 11%;" onclick="clearData();">清空列表</button>
</div>
</div>
<table class="table table-bordered text-center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>地址</th>
<th>手机号</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table_tbody"></tbody>
</table>
</div>
</div>
</div>

<script type="text/javascript">
find();
function save(){
var name = document.getElementById("user_name").value;
var sex = getSex();
var age = document.getElementById("user_age").value;
var address = document.getElementById("user_address").value;
var phone = document.getElementById("user_phone").value;

if(name==""){
alert("请输入名称");
document.getElementById("user_name").focus();
return;
}else if(age==""){
alert("请输入年龄");
document.getElementById("user_age").focus();
return;
}else if(address==""){
alert("请输入地址");
document.getElementById("user_address").focus();
return;
}else if(phone==""){
alert("请输入手机号");
document.getElementById("user_phone").focus();
return;
}

var map = new Object();
map.name = name;
map.sex = sex;
map.age = age;
map.address = address;
map.phone = phone;

var key = "";
if(document.getElementById("user_id").value==""){
key = createKey();
}else {
key = document.getElementById("user_id").value;
}
localStorage.setItem(key, JSON.stringify(map));
find();
alert("保存成功");
document.user_form.reset();
}

function editData(key){
var obj = JSON.parse(localStorage.getItem(key));
document.getElementById("user_id").value = key;
document.getElementById("user_name").value = obj.name;
document.getElementById("user_age").value = obj.age;
document.getElementById("user_address").value = obj.address;
document.getElementById("user_phone").value = obj.phone;
setRadioChecked(obj.sex);
}

function find(){
document.getElementById("user_id").value = "";
var node_body = document.getElementById("table_tbody");
node_body.innerHTML = "";
var nodeArray = [];

var num = 1;
for(var i=0; i<localStorage.length; i++){
var obj = JSON.parse(localStorage.getItem(localStorage.key(i)));
var node_tr = document.createElement("tr");
var node_td_num = document.createElement("td");
var node_td_name = document.createElement("td");
var node_td_sex = document.createElement("td");
var node_td_age = document.createElement("td");
var node_td_address = document.createElement("td");
var node_td_phone = document.createElement("td");
var node_td_oper = document.createElement("td");

var node_button_del = document.createElement("button");
node_button_del.type = "button";
node_button_del.value = localStorage.key(i);
node_button_del.className = "btn btn-danger";
node_button_del.innerHTML = "删除";
node_button_del.onclick = function(){
singleDelete(this.value);
};

var node_button_edit = document.createElement("button");
node_button_edit.type = "button";
node_button_edit.value = localStorage.key(i);
node_button_edit.className = "btn btn-primary";
node_button_edit.innerHTML = "编辑";
node_button_edit.onclick = function(){
editData(this.value);
};

node_td_num.innerHTML = num;
node_td_name.innerHTML = obj.name;
node_td_sex.innerHTML = obj.sex;
node_td_age.innerHTML = obj.age;
node_td_address.innerHTML = obj.address;
node_td_phone.innerHTML = obj.phone;
node_td_oper.appendChild(node_button_del);
node_td_oper.appendChild(node_button_edit);

node_tr.appendChild(node_td_num);
node_tr.appendChild(node_td_name);
node_tr.appendChild(node_td_sex);
node_tr.appendChild(node_td_age);
node_tr.appendChild(node_td_address);
node_tr.appendChild(node_td_phone);
node_tr.appendChild(node_td_oper);

nodeArray.push(node_tr);

num++;
}

for(var i=0; i<nodeArray.length; i++){
node_body.appendChild(nodeArray[i]);
}
}

function clearData(){
localStorage.clear();
find();
}

function singleDelete(key){
if(confirm("确定要删除吗？")){
localStorage.removeItem(key);
find();
}
}

function setRadioChecked(val){
if(val == "男"){
val = 0;
}else if(val == "女"){
val = 1;
}
var chkObjs = document.getElementsByName("user_sex");
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].value==val){
chkObjs[i].checked = true;
break;
}
}
}

function getSex(){
var chk = -1,sex="";
var chkObjs = document.getElementsByName("user_sex");
for(var i=0;i<chkObjs.length;i++){
if(chkObjs[i].checked){
chk = i;
break;
}
}

if(chk==0){
sex = "男";
}else if(chk==1){
sex = "女";
}else{
sex = "未知";
}
return sex;
}

function createKey(){
var str = "";
for(var i=0; i<10; i++){
str += Math.floor(Math.random()*10);
}
str += Date.parse(new Date());
return str;
}
</script>
</body>
</html>

CSS文件内容：

html {
font-size: 62.5%;
}
body {
background-color: #2a3542;
color: #797979;
overflow: hidden;
font-size: 1.6rem; /* =16px */
}

.form-group{
width: 100%;
float: left;
}
.form-group label{
font-size: 2.2rem;
}
.form-control{
background-color: #797979;
color: wheat;
}

.header-row{
background-color: #6f5499;
color: #cdbfe3;
}
.header-row h1{
margin: 10px 0 10px 0;
padding: 0;
}
.container-row{
margin-top: 10px;
}
.container-row table thead{
font-size: 2rem;
}
.container-row table thead th{
text-align: center;
}

浏览效果图：

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

标签： html5 存储 localStorage

相关文章推荐

新的分享

章节导航