forked from sheetjs/docs.sheetjs.com
		
	
		
			
				
	
	
	
		
			2.4 KiB
		
	
	
	
	
	
	
	
			
		
		
	
	
			2.4 KiB
		
	
	
	
	
	
	
	
| title | pagination_prev | pagination_next | sidebar_custom_props | ||
|---|---|---|---|---|---|
| Local Storage API | demos/grid | demos/worker | 
 | 
The Storage API, encompassing localStorage and sessionStorage, describes
simple key-value stores that only support string values and keys.
Arrays of objects can be stored using JSON.stringify using row index as key:
const aoo = XLSX.utils.sheet_to_json(ws);
for(var i = 0; i < aoo.length; ++i) localStorage.setItem(i, JSON.stringify(aoo[i]));
Recovering the array of objects is possible by using JSON.parse:
const aoo = [];
for(var i = 0; i < localStorage.length; ++i) aoo.push(JSON.parse(localStorage.getItem(i)));
const ws = XLSX.utils.json_to_sheet(aoo);
This example will fetch https://sheetjs.com/data/cd.xls, fill localStorage with
rows, then generate a worksheet from the rows and write to a new file.
:::caution
This example is for illustration purposes. If array of objects is available, it is strongly recommended to convert that array to a worksheet directly.
:::
function SheetJStorage() {
  const [url, setUrl] = React.useState("https://sheetjs.com/data/cd.xls");
  const set_url = React.useCallback((evt) => setUrl(evt.target.value));
  const [out, setOut] = React.useState("");
  const xport = React.useCallback(async() => {
    // get first worksheet data as array of objects
    const ab = await (await fetch(url)).arrayBuffer();
    const wb = XLSX.read(ab), wsname = wb.SheetNames[0];
    const aoo = XLSX.utils.sheet_to_json(wb.Sheets[wsname]);
    // reset and populate localStorage
    localStorage.clear();
    for(var i = 0; i < aoo.length; ++i) localStorage.setItem(i, JSON.stringify(aoo[i]));
    // create new array of objects from localStorage
    const new_aoo = [];
    for(var i = 0; i < localStorage.length; ++i) {
      const row = JSON.parse(localStorage.getItem(i));
      new_aoo.push(row);
    }
    setOut(`Number of rows in LocalStorage: ${localStorage.length}`);
    // create and export workbook
    const new_ws = XLSX.utils.json_to_sheet(new_aoo);
    const new_wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(new_wb, new_ws, "Sheet1");
    XLSX.writeFile(new_wb, "SheetJStorage.xlsx");
  });
  return ( <> {out && (<><a href={url}>{url}</a><pre>{out}</pre></>)}
    <b>URL: </b><input type="text" value={url} onChange={set_url} size="50"/>
    <br/><button onClick={xport}><b>Fetch!</b></button>
  </> );
}