localstorage存储文件blob

因为localstorage只支持json格式的数据，so，先将blob转成base64字符串，这一步其实有很多问题，因为有的文件在转成base64后会便的很大，然而localstorage是有大小限制的，如果存储超了会报QuotaExceededError，这个时候就不能采用这个方案了，或者你可以把其他的数据清空掉hh，数据量太大的话可以考虑indexDB方案，一般都会满足需求，什么类型的数据都可以存储，而且很大。

ps：存储的时候最好加上特定的前缀会比较好。

补充：对于这种东西，最好还是在响应头的cache-control进行配置会简单很多，可以在ngxin进行处理，转blob是下策，因为localstorage的存储是有大小限制的

将数据转化为base64存储

set(dataurl,name){
      fetch(dataurl)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.blob();
        })
        .then(blob => {
          let reader = new FileReader();
          reader.onloadend = function () {
            let base64data = reader.result; // 这里得到的是一个"data:*/*;base64,..."格式的字符串
            // 存储到localStorage
            localStorage.setItem(name, base64data);
          };
          reader.readAsDataURL(blob);
        })
        .catch(error => {
          console.error('Error', error);
        });
 }

当需要使用的时候，这里测试的数据是音频数据。

get(name){     
     let base64data = window.localStorage.getItem(name)

      // 分离出MIME类型和实际的Base64内容
      let dataParts = base64data.split(';base64,');
      let contentType = dataParts[0].split(':')[1];
      let base64String = dataParts[1];

      // 将Base64字符串转换回Blob
      let decodedData = window.atob(base64String);
      let arrayBuffer = new ArrayBuffer(decodedData.length);
      let uint8Array = new Uint8Array(arrayBuffer);

      for (let i = 0; i < decodedData.length; i++) {
        uint8Array[i] = decodedData.charCodeAt(i);
      }

      let restoredBlob = new Blob([uint8Array], { type: contentType });
      return restoredBlob
      // let audioElement = new Audio(URL.createObjectURL(restoredBlob));
      // audioElement.play().catch(error => console.error(error));
}