input读取本地文件 H5 localStorage 本地储存 JSON传递数据

H5 localStorage 本地储存 JSON传递数据

JSON简介：JSON(JavaScriptObject Notation, JS 对象简谱) 是一种轻量级的数据交换格式，进行对象和字符串之间的数据转换

<input type="file" class="abc">
<button>我是按钮</button>

$(".abc").on("change",function(){//监听input内容改变
  var file = this.files[0];//因为js获取.abc为一个集合，故选第一个
  var reader=new FileReader(); //新建文件阅读对象，来转意路径
  reader.readAsDataURL(file); //将读取的文件路径转化为url类型
  reader.onload = function () {  //该步仅js支持，jQuery不支持
    alert(this.result);   //弹出路径
    var obj = new Object(); 新建对象用来传输数据
    obj.src = this.result;
    obj.key = "作者最帅";
    var objCarry = JSON.stringify(obj);   //将对象转化为字符串
    localStorage.setItem(obj.key,heroCarry);//将对象保存到本地
    //注意：setItem(key,value) 采用键值对保存数据，提取数据也是通过 key 值得到数据,
    // 故不同的数据对象应设置不同的键值，上述例子中键值为 obj.key 
  }  
});
$("button").click(function(){
   for(let i=0; i<localStorage.length;i++){//遍历本地储存对象，localStorage集合
        var key = localStorage.key(i); //遍历的到所有键值
        var objCarry = localStorage.getItem(key); //通过键值得到对应的字符串对象
        var obj = JSON.parse(objCarry);  //将字符串对象，转为实际对象
        console.log(obj.src);   //打印相应对象的 src 即读取文件的路径
        localStorage.removeItem(key);  //通过键值删除对应对象
 }
});

注意：释义都在注释里