--- title: "Store PDF signatures in browser | Nutrient" canonical_url: "https://www.nutrient.io/guides/web/samples/stored-electronic-signatures/" md_url: "https://www.nutrient.io/guides/web/samples/stored-electronic-signatures.md" last_updated: "2026-06-08T09:14:14.477Z" description: "Learn how to save and store electronic signatures in local storage with our JavaScript guide. Access code examples and enhance your signature management." --- # Storing electronic signatures in the browser using JavaScript Add logic to store generated electronic signatures in the browser’s local storage. Get additional resources by visiting our guide on [saving and storing electronic signatures in our JavaScript viewer](/guides/web/signatures/signature-storage.md). [Get Started](https://www.nutrient.io/sdk/web/getting-started.md) [All Samples](https://www.nutrient.io/guides/web/samples.md) [Download](https://www.nutrient.io/guides/web/downloads.md) [Launch Demo](https://www.nutrient.io/demo/) --- ```js import PSPDFKit from "@nutrient-sdk/viewer"; const STORAGE_KEY = "signatures_storage"; const ATTACHMENTS_KEY = "attachments_storage"; export function load(defaultConfiguration) { return PSPDFKit.load(defaultConfiguration).then(async (instance) => { console.log("Nutrient Web SDK successfully loaded!!", instance); async function initializeSignatures() { const signaturesString = localStorage.getItem(STORAGE_KEY); if (signaturesString) { const storedSignatures = JSON.parse(signaturesString); // Construct annotations from serialized entries and call setStoredSignatures API const list = PSPDFKit.Immutable.List( storedSignatures.map(PSPDFKit.Annotations.fromSerializableObject) ); instance.setStoredSignatures(list); const attachmentsString = localStorage.getItem(ATTACHMENTS_KEY); if (attachmentsString) { const attachmentsArray = JSON.parse(attachmentsString); // from the data URLs on local storage instantiate Blob objects const blobs = await Promise.all( attachmentsArray.map(({ url }) => fetch(url).then((res) => res.blob()) ) ); // create an attachment for each blob blobs.forEach(instance.createAttachment); } } } initializeSignatures(); instance.addEventListener("storedSignatures.create", async (annotation) => { const signaturesString = localStorage.getItem(STORAGE_KEY); const storedSignatures = signaturesString? JSON.parse(signaturesString) : []; const serializedAnnotation = PSPDFKit.Annotations.toSerializableObject(annotation); if (annotation.imageAttachmentId) { const attachment = await instance.getAttachment( annotation.imageAttachmentId ); // Create data URL and add it to local storage. // Note: This is done only for demonstration purpose. // Storing potential large chunks of data using local storage is // considered bad practice due to the synchronous nature of that API. // For production applications, please consider alternatives such a // dedicated back-end storage or IndexedDB. const url = await fileToDataURL(attachment); const attachmentsString = localStorage.getItem(ATTACHMENTS_KEY); const attachmentsArray = attachmentsString? JSON.parse(attachmentsString) : []; attachmentsArray.push({ url, id: annotation.imageAttachmentId }); localStorage.setItem(ATTACHMENTS_KEY, JSON.stringify(attachmentsArray)); } storedSignatures.push(serializedAnnotation); localStorage.setItem(STORAGE_KEY, JSON.stringify(storedSignatures)); // Add new annotation so that its render as part of the UI on the current session instance.setStoredSignatures((signatures) => signatures.push(annotation)); }); instance.addEventListener("storedSignatures.delete", (annotation) => { const signaturesString = localStorage.getItem(STORAGE_KEY); const storedSignatures = signaturesString? JSON.parse(signaturesString) : []; const annotations = storedSignatures.map( PSPDFKit.Annotations.fromSerializableObject ); const updatedAnnotations = annotations.filter( (currentAnnotation) =>!currentAnnotation.equals(annotation) ); localStorage.setItem( STORAGE_KEY, JSON.stringify( updatedAnnotations.map(PSPDFKit.Annotations.toSerializableObject) ) ); // Use setStoredSignatures API so that the current UI is properly updated instance.setStoredSignatures((signatures) => signatures.filter((signature) =>!signature.equals(annotation)) ); if (annotation.imageAttachmentId) { // Remove attachment from array const attachmentsString = localStorage.getItem(ATTACHMENTS_KEY); if (attachmentsString) { let attachmentsArray = JSON.parse(attachmentsString); attachmentsArray = attachmentsArray.filter( (attachment) => attachment.id!== annotation.imageAttachmentId ); localStorage.setItem( ATTACHMENTS_KEY, JSON.stringify(attachmentsArray) ); } } }); instance.addEventListener("document.change", initializeSignatures); return instance; }); } function fileToDataURL(file) { return new Promise((resolve) => { const reader = new FileReader(); reader.onload = function () { resolve(reader.result); }; reader.readAsDataURL(file); }); } ``` This code sample is an example that illustrates how to use our SDK. Please adapt it to your specific use case. --- ## Related pages - [Add watermarks to PDFs using JavaScript example](/guides/web/samples/add-watermarks-to-pdf-javascript.md) - [Customize PDF annotation permissions using JavaScript](/guides/web/samples/custom-annotation-permissions.md) - [PDF Collaboration permissions using JavaScript](/guides/web/samples/collaboration-permissions.md) - [Customize the UI for PDF annotations using JavaScript](/guides/web/samples/annotations-inspector.md) - [JavaScript PDF magazine viewer](/guides/web/samples/javascript-magazine-viewer.md) - [Add electronic signature images to PDFs using JavaScript](/guides/web/samples/adding-image-electronic-signatures.md) - [Hide or reveal area on PDFs using JavaScript](/guides/web/samples/hide-reveal-area-in-pdf.md) - [Customize PDF annotation tooltips using JavaScript](/guides/web/samples/custom-annotation-tooltip.md) - [PDF annotation in JavaScript](/guides/web/samples/javascript-pdf-annotations.md) - [Redact PDFs using JavaScript](/guides/web/samples/javascript-pdf-redaction.md) - [Open PDFs using JavaScript](/guides/web/samples/open-pdf-using-javascript.md) - [PDF presentation mode using JavaScript](/guides/web/samples/presentation-mode.md) - [View PDFs in dark mode using JavaScript](/guides/web/samples/dark-mode-pdf-viewer.md) - [Customizing JavaScript PDF printing modes](/guides/web/samples/pdf-printing-modes.md) - [Customized Document Editor Toolbar](/guides/web/samples/customized-document-editor-toolbar.md) - [PDF text selection using JavaScript](/guides/web/samples/pdf-text-selection-javascript.md) - [Drag-and-drop UI in our JavaScript PDF viewer](/guides/web/samples/drag-and-drop.md) - [Zoom example for our JavaScript PDF viewer](/guides/web/samples/zooming.md) - [Open, view, and annotate on images using JavaScript](/guides/web/samples/annotating-images.md) - [Handling password-protected PDFs in our JavaScript viewer](/guides/web/samples/password-protected-pdf.md) - [Collaborate on PDFs using JavaScript](/guides/web/samples/instant-pdf-collaboration.md) - [PDF form support using JavaScript](/guides/web/samples/javascript-pdf-form.md) - [Create custom overlays on PDFs using JavaScript](/guides/web/samples/custom-overlay-items.md) - [Custom HTML PDF annotations using JavaScript](/guides/web/samples/custom-annotations.md) - [Add electronic signatures to PDFs using JavaScript](/guides/web/samples/electronic-signatures-in-pdf.md) - [Customize the PDF toolbar using JavaScript](/guides/web/samples/customized-pdf-toolbar.md) - [Customizing PDF text search using JavaScript](/guides/web/samples/customized-pdf-search.md) - [Flipbook PDF viewer using JavaScript](/guides/web/samples/flipbook.md) - [Disable PDF editing and annotations](/guides/web/samples/open-read-only-pdf.md) - [Digitally sign a PDF using JavaScript](/guides/web/samples/javascript-digital-signatures.md) - [Edit PDFs using JavaScript](/guides/web/samples/edit-pdf-javascript.md)