web前端之localStorage在缓存中对数组进行存储、获取、删除

86 篇文章 0 订阅
7 篇文章 0 订阅

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’)的原因是因为其一直没有被删除过,一直存在所以可以进行对应的操作

这是在下的一点理解,如理解错误请留言告知

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值