基于localstorage实现增删改查功能

本文以英雄联盟英雄列表中英雄的增删改查为例，介绍localstorage的增删改查功能

该图显示了增差功能，由于我将图片和英雄名字设置为相同的，所以这里输入英雄名字（我将其命名为1~100的数字）图片和自行与其匹配

一、增

此处为英雄列表，即将所有英雄都放到该ul中

<!-- 英雄列表 -->
    <ul class="allhero">
        <!-- 例 -->
        <!-- <li class="listitem" id=i>
            <div class="heroitem">
                <div class="heropic">
                    <img src="图片/1.jpg">
                </div>
                <p class="heroname">1</p>
            </div>
            <button type="button" id="remove">删</button>
            <button type="button" id="change">改</button>
        </li> -->
    </ul>

点击增加按钮后，将会调用一系列方法，来实现增加一个英雄的功能，首先两个判断来判断输入框的值是否符合规范，如果输入规范即获取增加输入框的英雄名字和英雄类型。

$("#plusbtn").click(function () {
        var date = getDate();
            let inputvalue = $(".phname").val();  //名字
            let heroposition = $("#heroposition").val();  //位置

            if (inputvalue == '' || heroposition == '') {
                alert("请输入完整的英雄名称和位置");
                $("#phname").val("");  //清空输入框
                $("#heroposition").val("");  //清空输入框
            }
            var local = getDate();
            var imgurl = "图片/" + inputvalue + ".jpg";
            local.push({
                name: inputvalue,
                pic: imgurl,
                class: heroposition
            });
            localStorage.setItem("herolist", JSON.stringify(herolist));
            saveDate(local);
            $("#phname").val("");  //清空输入框
            $("#heroposition").val("");  //清空输入框
    });

saveDate（）函数可以将输入的英雄内容保存到本地储存并且再次渲染到页面上。

// 保存本地数据
    function saveDate(date) {
        localStorage.setItem("herolist", JSON.stringify(date));
        load();
    }

load（）函数将本地存储的内容重新渲染的页面上，其中append（）方法是增功能的具体表现，也是该功能的核心点，each（）函数可以直接遍历date数组中的每个元素，然后将所有的元素渲染到页面上

// 渲染加载数据
    function load() {
        var date = getDate();
        $(".allhero").empty();
        $.each(date, function (i, n) {
            $(".allhero").append(
                "<li class='listitem' id=" + i + "> <div class='heroitem'>  <div class=" + 'heropic' + "><img src='" + n.pic + "'></div><p class='heroname'>" + n.name + "</p></div> <button type=" + 'button' + " id=" + 'remove' + ">删</button> <button type=" + 'button' + " id=" + 'change' + "  data-toggle=" + 'modal' + "   data-target=" + '#exampleModal' + ">改</button></li>");
             }
        });
    }

二、删

删除功能逻辑较为简单，点击每个英雄左上角的删除按钮，根据该按钮找到装英雄的整体盒子，即herolist，然后将本地储存的该元素删除掉，之后再将本地的数据渲染的到页面上。需要注意到的点是，每个盒子上的删除按钮是之后动态添加的，所以需要使用on（）来绑定删除事件。

$(".allhero").on("click", "#remove", function () {
        // 1.获取本地存储
        var date = getDate();
        // console.log(date);
        // 2.获取自己定义的id值
        var index = $(this).parent().attr("id");  //返回其上一个兄弟元素
        // .attr("id")  获取自己增加的id值
        date.splice(index, 1);  //splice(从第几个开始删，删除几个)
        console.log(herolist);
        console.log(index);
        // 3.保存到本地存储
        saveDate(date);
        // 4.重新渲染页面
        load();
    });

 三、改

修改事件的逻辑是点击英雄右上角的按钮，然后弹出模态框，在模态框中输入想要修改为什么名字和类别，获取这两个数据，使用splice（）方法将其修改，然后保存本地渲染。

$(".allhero").on("click", "#change", function () {
        // 获取本地存储
        var date = getDate();
        // console.log(date);
        var heroname = $(this).parent();  //  .attr("id")  获取该英雄的id值
        let changep = heroname.find(".heroitem").find(".heroname");
        console.log(changep);  //获取该元素的名字
        $("#sure").click(function () {
            // 获取输入框的值
            var changevalue = $("#recipient-name").val();
            // console.log(changevalue);
            var index = heroname.attr("id");
            var changeclass = $("#message-text").val();
            date.splice(index, 1, { name: changevalue, pic: "图片/" + changevalue + ".jpg", class: changeclass});
            saveDate(date);
            load();
        });
    });

四、查

查找事件，获取查找框的值，让该值与本地储存数据进行匹配，如果匹配到，就会在英雄列表最前边将该英雄显示出来，点击ok按钮即可清除，ok按钮是在添加该匹配的的元素时，动态添加的，逻辑与删除功能一样。

if (event.keyCode == "13") {
            // alert('你输入的内容为：' + $('#query').val());
            if ($("#query").val() == '') {
                alert("请输入你想查询的英雄");
            } else {
                let queryvalue = $("#query").val();
                $("#query").val("");  //清空输入框
                let queryname = date[queryvalue - 1];  //获取本地储存数据
                $(".allhero").prepend(
                    "<li class='listitem'> <div class='heroitem'>  <div class=" + 'heropic' + "><img src='" + queryname.pic + "'></div><p class='heroname'>" + queryname.name + "</p></div> <button type=" + 'button' + " id=" + 'ok' + ">ok</button> </li>"
                )
            }
        }

        // 点击按钮，删除该英雄
        $(".allhero").on("click", "#ok", function () {
            var okp = $("#ok").parent();
            console.log(okp);
            okp.remove();
        });

 五、分类显示功能

给每个位置绑定点击事件，遍历本地数据，然后进行判断，如果其类名匹配成功，就将其打印出来，全部位置为直接渲染本地储存数据