web前端之localStorage在缓存中对数组进行存储、获取、删除
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
ps:但是该方法只能适用于当前浏览器且不清理缓存的状况下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
if(localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount)+1;
}else{
localStorage.pagecount=1;
}
document.write("Visits:"+localStorage.pagecount+"times");
</script>
</head>
<body>
</body>
</html>
现在我们看到了localStorage魅力了吧,现在我们进行常规的界面书写:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript"src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var listArr = [];
$('#bt1').on('click',function(){
$('#list ul').append('<li>'+$('#txt').val()+'<a class="delteLi" style="color:red;float:right;">删除</a>'+'</li>');
listArr.push($('#txt').val());
$('.delteLi').on('click',function(){
this.parentElement.remove();
});
});
$('#bt2').on('click',function(){
$('#list li').remove();
});
});
</script>
<style type="text/css">
body{
width: 500px;
height: auto;
margin: 0 auto;
border:1px solid #ccc;
padding:20px;
}
#list{
width: 500px;
height: auto;
margin-top: 20px;
border: red solid 1px;
}
#list li:nth-child(odd){
background: #ccc;
}
#list li:nth-child(even){
background: pink;
}
</style>
</head>
<body>
<input id="txt" type="text">
<button id="bt1">添加</button>
<button id="bt2">清空</button>
<div id="list">
<ul></ul>
</div>
</body>
</html>
现在开始localStorage的正式工程咯:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript"src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(localStorage.getItem("menuTitle")){
var strStoreDate =localStorage.getItem("menuTitle");
var listArr=strStoreDate.split(",")
}else{
var listArr = [];
}
Initi();
$('#bt1').on('click',function(){
listArr.push($('#txt').val());
localStorage.setItem("menuTitle",listArr);
Initi();
});
$('#bt2').on('click',function(){
localStorage.removeItem('menuTitle');
listArr = [];
Initi();
});
$('#list').on('click','.delteLi',function(){
listArr.splice(this.parentElement.title,1);
localStorage.setItem("menuTitle",listArr);
Initi();
});
function Initi(){
$('#list li').remove();
$.each(listArr,function(index,value){
$('#list ul').append('<li title='+index+'>'+value+'<a class="delteLi" style="color:red;float:right;">删除</a>'+'</li>');
});
}
});
</script>
<style type="text/css">
body{
width: 500px;
height: auto;
margin: 0 auto;
border:1px solid #ccc;
padding:20px;
}
#list{
width: 500px;
height: auto;
margin-top: 20px;
border: red solid 1px;
}
#list li:nth-child(odd){
background: #ccc;
}
#list li:nth-child(even){
background: pink;
}
</style>
</head>
<body>
<input id="txt" type="text">
<button id="bt1">添加</button>
<button id="bt2">清空</button>
<div id="list">
<ul></ul>
</div>
</body>
</html>
这样就实现完成了,但是我在操作的时候遇到下面问题:
$('.delteLi').on('click',function(){
listArr.splice(this.parentElement.title,1);
localStorage.setItem("menuTitle", listArr);
Initi();
});
为什么这样实现不了,我个人的理解还是因为作用域的关系,当刚进入该js文件时,进行对应的初始化,产生一些dom元素
所以$(‘.deleteLi’)可以进行使用
当进行添加操作之后,重新编译了这些dom,所以$(‘.deleteLi’)不在$(‘#bt2’).click里面是无法实现的
$(‘#list’)的原因是因为其一直没有被删除过,一直存在所以可以进行对应的操作
这是在下的一点理解,如理解错误请留言告知