一、增

此处为英雄列表，即将所有英雄都放到该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();});

五、分类显示功能

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

基于localstorage实现增删改查功能相关推荐

ext store 数据修改_Go 数据存储篇（一）：基于内存存储实现数据增删改查功能...
在 Web 编程中,经常需要处理用户请求数据,而用户请求数据的处理往往又涉及到数据存储与获取,支持存储数据的媒介很多,包括内存.文件系统.数据库等,接下来,学院君将花几个篇幅的教程来系统介绍 Go W ...
molicode生成vue增删改查功能
2019独角兽企业重金招聘Python工程师标准>>> molicode生成vue增删改查功能背景描述当前生成的页面主要应用于VUE前端UI框架 iview: https://i ...
SpringBoot的开发(3)--前端页面的搭建、前端页面的编写、分页和增删改查功能的实现...
前端页面的搭建首先我们在resources包下新建一个文件夹static,SpringBoot默认会去把static包下的文件做一个路由然后在static包下新建一个HTML File类型的文件, ...
solr系列三：solr和spring整合并实现增删改查功能
在这篇文章中将通过代码带大家一步步实现spring和solrj的整合,并实现solrj的增删改查功能. 1.solrj的spring配置如下: <beans xmlns="http:/ ...
使用EF框架实现MVC的增删改查功能！！！Entity Framework
一.什么是EF? ADO.NETEntity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.ADO.NET Entity Fram ...
使用三层架构实现简单的MVC登陆操作！并实现基本的增删改查功能！！
一丶使用三层架构创建一个简单的MVC登录操作 1.首先,创建一个项目以及BLL层.DAL层.Entity层,如图一: 图一 2.创建一个数据库如图二: 图二 3基本工作已做好,接下来就编BLL层.DA ...
Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能，无需写任何代码)
JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式 (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...

基于localstorage实现增删改查功能

一、增

二、删

三、改

四、查

五、分类显示功能

基于localstorage实现增删改查功能相关推荐

最新文章

热门文章