Manage session storage in PDF Viewer

14 Jul 20262 minutes to read

The Syncfusion® PDF Viewer exposes the enableLocalStorage property to control how session-specific viewer data is stored. Set this property to choose between in-memory storage and the browser’s sessionStorage.

Using the enableLocalStorage property

Set enableLocalStorage to control whether the viewer preserves session data in an in-memory collection or uses the browser’s sessionStorage. When enableLocalStorage is true, the viewer keeps session data in memory for the current application session; when false (the default), sessionStorage is used. Review memory implications before enabling in-memory storage for large documents or heavy interactive content.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
        id="container"
        documentPath="PDF_Succinctly.pdf"
        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
        style={{ 'height': '680px' }}
        // Enable or disable the use of browser session storage for viewer data.
        enableLocalStorage={true}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Considerations

  • Increased memory usage: Enabling in-memory storage can increase memory consumption, especially for large documents or when many interactive elements (form fields, annotations) are present.
  • Destroy the instance when no longer needed: Destroy the PDF Viewer instance when it is no longer required to avoid memory leaks, particularly when enableLocalStorage is true.
  • Default behavior: The default value is false, which uses the browser’s sessionStorage unless explicitly changed.

View sample in GitHub