localStorage

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

<input type="file" class="abc">

<button>我是按钮<^tton>

$(".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);  //通过键值删除对应对象

}

});