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

最新推荐文章于 2022-10-28 00:01:45 发布

方寸之间。

最新推荐文章于 2022-10-28 00:01:45 发布

阅读量2.9k

点赞数

分类专栏： HTML5 文章标签： html5 存储 localStorage

本文链接：https://blog.csdn.net/mazhili1991/article/details/53468071

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>
<!-- 
	localStorage的存储位置在：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Local Storage
	需要注意的是：	localStorage是基于浏览器的，不同的浏览器所保存的数据是不互通的！
	比如：在chrome浏览器保存的数据，在firefox打开同一个页面，将不能查找到chrome所保存的数据
-->
<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" οnclick="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" οnclick="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%;" οnclick="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;
}

浏览效果图：

方寸之间。

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
HTML5的本地存储功能，使用localStorage

HTML文件内容：HTML5的本地存储功能，使用localStorage<!-- localStorage的存储位置在：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Local Storage 需要注意的是： localStorage是基于浏览器的，不同的浏览器所保存的
复制链接

扫一扫