Managing Local Storage in Syncfusion PDF Viewer

21 Dec 20242 minutes to read

The Syncfusion PDF Viewer provides the enableLocalStorage property, which allows you to control how session-specific data is stored. You can choose to store this data in an internal collection or rely on the default session storage.

Using the enableLocalStorage Property

Set the enableLocalStorage property to manage whether the PDF Viewer uses session storage (default) or an internal collection. When set to true, session-specific data is kept in memory. Otherwise, session storage is used.

import { Component, OnInit } from '@angular/core';
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  FormFieldsService,
  FormDesignerService,
  PrintService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer 
        id="pdfViewer"
        [serviceUrl]="service"
        [documentPath]="document"
        [enableLocalStorage]="true"
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    FormFieldsService,
    FormDesignerService,
    PrintService
  ]
})
export class AppComponent implements OnInit {
  public document: string = 'PDF_Succinctly.pdf';
  public service: string = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';

  ngOnInit(): void { }

}

Impact and Considerations

  • Increased Memory Usage: Setting enableLocalStorage to true can increase memory usage, particularly with larger documents or those containing many interactive elements, such as form fields and annotations.
  • Avoiding Memory Leaks: It is crucial to properly dispose of the PDF Viewer instance when it’s no longer needed to prevent memory leaks, especially when using in-memory storage.
  • Default Behavior: By default, this property is set to false, meaning the session storage mechanism is utilized unless explicitly changed.

Enhanced Control

Leveraging the enableLocalStorage property provides greater flexibility in managing how data is stored during a session, allowing you to optimize performance and storage based on your application’s specific requirements.

View sample in GitHub