本文以英雄联盟英雄列表中英雄的增删改查为例,介绍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();
});
五、分类显示功能
给每个位置绑定点击事件,遍历本地数据,然后进行判断,如果其类名匹配成功,就将其打印出来,全部位置为直接渲染本地储存数据