docs.sheetjs.com/docz/docs/03-demos/06-data/02-storageapi.md
2023-02-24 02:55:41 -05:00

2.4 KiB

title pagination_prev pagination_next sidebar_custom_props
Local Storage API demos/grid demos/worker
type
web

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>
  </> );
}