网页设计中，使用JSON+localStorage存储数据（以数组形式），并在界面动态的添加图片

1.使用表单（form）获得数据。

从表单中获取数据有很多方法，推荐使用JQuery方法formObj.serializeArray();
使用该方法获得数据是一个数组，形式如下

0: {name: "title", value: "银翼"}
1：……
2：……
……

将数据提取出来，转换为对象形式：

function gain(formObj){  
  var ct=$(formObj).serializeArray();
      var obj = {};      
        $.each(ct, function () {    
              if (obj[this.name] !== undefined) {          
                    if (!obj[this.name].push) {               
                         obj[this.name] = [obj[this.name]];         
                     }               
                     obj[this.name].push(this.value || "");        
               } else {               
                     obj[this.name] = this.value || "";        
               }      
      });     
     return obj;
}

返回的obj便是对象形式，像这样：title: “寒冰射手”

2. 存储数据

因为要存储多组数据，所以将数据整理为数组形式存储。且我在每组数据后都有一个分类category。

{title: "银翼", name: "潘拉", cocal: "images/img/Ashe.png", category: "怪物"}

所以将所有category为怪物的数据装在一个数组中
接受gain()方法返回的obj,

function store(obj){
//如果内存中已有该类型数组，将obj添加进数组最后一项
    if(storage.getItem(obj.category)!=undefined){  
        var oi=JSON.parse(storage.getItem(obj.category)); 
        oi.push(obj); 
        storage.setItem(obj.category,JSON.stringify(oi));
     } 
     else{ //如果内存中没有这个类型的数组，就新建一个
             var io=[obj];//添加进数组
             var al=JSON.stringify(io);       //将io转换为字符串                                  
             storage.setItem(obj.category,al);
     } 
 } 

3. 在界面添加图像等新添加数据

在上面标题2进行的同时，添加下面的方法，在界面添加信息。
function upload(obj){
//新建子节点
var li=KaTeX parse error: Expected 'EOF', got '#' at position 40: …' data-target='#̲myAlter'></li>"…("").text(obj.category);
var img="";
var p=$("

").text(obj.title);
li.append(a,img,p); //将a,img,p添加进li
ulObj.append(li);//ul是我的界面容器，将li添加进该容器中
}