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

电玩女神 2023-05-29 06:27 68阅读 0赞

## H5 localStorage 本地储存 JSON传递数据 ##

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

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

注意：释义都在注释里