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

最新推荐文章于 2024-05-10 09:40:33 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2024-05-10 09:40:33 发布

阅读量1.2w

点赞数 2

分类专栏： web前端 JavaScript 小应用文章标签： session cookie localstora web前端存储

本文链接：https://blog.csdn.net/u014785563/article/details/76039211

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

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之熊猫三胞胎

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
web前端之localStorage在缓存中对数组进行存储、获取、删除

web前端之localStorage在缓存中对数组进行存储、获取、删除HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高
复制链接

扫一扫

专栏目录