uni-app Error: APP-SERVICE-SDK:setStorageSync:fail exceed storage item max length

The error APP-SERVICE-SDK:setStorageSync:fail exceed storage item max length in uni-app indicates that the data you are trying to store using uni.setStorageSync exceeds the maximum allowed length for a single storage item.

Explanation:

In uni-app, uni.setStorageSync is used to synchronously store data in the local storage. However, there is a limit to the size of data that can be stored in a single key. The exact limit can vary depending on the platform (e.g., H5, WeChat Mini Program, etc.), but it is generally around 1MB per key.

Solution:

To resolve this issue, you can try the following approaches:

1. Split the Data:

   • If the data you are trying to store is large, consider splitting it into smaller chunks and storing them under different keys.
   • For example, instead of storing a large JSON object as a single key, you can split it into multiple parts and store each part separately.

   const largeData = { /* your large data object */ };
   const chunkSize = 500 * 1024; // 500KB per chunk
   const chunks = [];
   
   for (let i = 0; i < largeData.length; i += chunkSize) {
       chunks.push(largeData.slice(i, i + chunkSize));
   }
   
   chunks.forEach((chunk, index) => {
       uni.setStorageSync(`data_chunk_${index}`, chunk);
   });

2. Compress the Data:

   • If the data is compressible (e.g., JSON, text), you can compress it before storing it and decompress it when retrieving it.
   • Libraries like pako can be used for compression.

   import pako from 'pako';
   
   const data = { /* your large data object */ };
   const compressedData = pako.deflate(JSON.stringify(data));
   uni.setStorageSync('compressed_data', compressedData);
   
   // To retrieve and decompress
   const retrievedData = uni.getStorageSync('compressed_data');
   const decompressedData = pako.inflate(retrievedData, { to: 'string' });
   const originalData = JSON.parse(decompressedData);

3. Use IndexedDB (for H5):

   • If you are working on an H5 platform, consider using IndexedDB for storing large amounts of data. IndexedDB has a much higher storage limit compared to localStorage.

   const request = indexedDB.open('MyDatabase', 1);
   
   request.onupgradeneeded = function(event) {
       const db = event.target.result;
       const store = db.createObjectStore('MyStore', { keyPath: 'id' });
   };
   
   request.onsuccess = function(event) {
       const db = event.target.result;
       const transaction = db.transaction('MyStore', 'readwrite');
       const store = transaction.objectStore('MyStore');
       store.put({ id: 1, data: largeData });
   };