/**增删改查分类基础逻辑（本质操作：增删改查操作的都是本地储存里的数组，而不是代码里的数组）
* 第一步，写好本地储存需要的数组格式===图片地址、英雄名称和英雄属性
* 第二步， 1.写将自己代码里的数组储存到本地储存的方法（本地储存只能存字符串，所以需要先转化）saveDate()
* 2.写得到本地储存数组的“date”数组方法（先转化为数组对象） getDate()
* 3.写渲染遍历方法，使本地储存数组“date”加载到页面(注意每次遍历前要清空盒子内所有东西) load()
* 本质：增删改查，修改了本地储存的数据。load渲染方法，遍历了本地储存数组显示到页面中
* 所以要每次遍历前清空一下盒子的内容
* 4.前期工作完成
* 涉及到的知识：两个有参构造1.localStorage.setItem(key, JSON.stringify(date)); 2.localStorage.getItem(list);
* each数组动态遍历，即随着i的增加检测下标i所对应的数组对象。
* each模板：$.each(dateName, function (i, value) {}
* dateName：数组名称,i:数组下标，val
* 第三步，写需要的增删改查方法
* 1.如果有图片，需要先写动态预览。
* file的图片路径读取不到，需要先转化为64位，然后在读取转化后数据的result（即我们需要的图片路径）
* 涉及到的知识点：onchange，files[0]，new FileReader()，readAsDataURL(file)，result
* (1) onchange 事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事件。
* (2) files[0]：type="file"的input原型地址
* (3) new FileReader()，readAsDataURL(file)：将files[0]转化位base64位代码可获取状态
* (4) result：上传文件获取的图片路径；即img.src = files[0].result;
* (5) 注意获取的时候用js获取比较简单
* 2.增加函数（注意刚提到的增删改查的本质：对本地储存的数组进行操作，而不是对代码里的数组进行操作）
* 得到本地储存数据getDate()
* push（）方法向数组中增加自己想要的元素
* 保存更改（增加新元素）后的新的本地储存数组date saveDate()
* 遍历新的date（本地储存中的）数组
* 3.删除函数（核心和增加函数一样）
* 得到本地储存数据getDate()
* splice（）方法向数组中删除元素 date.splice(index, num);index数组下标，num从这个下标开始后面要删除的个数
* 保存更改（增加新元素）后的新的本地储存数组date saveDate()
* 遍历新的date（本地储存中的）数组
* 4.修改函数（date.splice(index, 1, { img: result1, name: $('#name1').val(), title: $('#sort1').val() });）
* 得到本地储存数据getDate()
* splice（）方法向数组中删除元素 date.splice(index, num，html1，html2,html3···);index数组下标，num从这个下标开始后面要删除的个数，html要添加的元素
* 保存更改（增加新元素）后的新的本地储存数组date saveDate()
* 遍历新的date（本地储存中的）数组
* 5.查找功能
* 巧妙思路：遍历网页需要查找的区域所有元素，遍历的同时检测区域中每个元素的text值，与获取的input里的值进行比较
* 若相同，this元素显示；若不相同，this元素隐藏
* 第四步，写重置功能
* 用于元素被删除想要找回时的的操作
* 具体实现：调用saveDate（）方法，参数传递值--想要转化成本地储存的代码里的数组
* jquery很简单，了解本质和逻辑后100多行js代码就能写出一个很好的
*/
网友评论