feat: replace localStorage with localforage for storing drafts

frappe/public/build.json

@@ -100,6 +100,7 @@
 		"node_modules/moment/min/moment-with-locales.min.js",
 		"node_modules/moment-timezone/builds/moment-timezone-with-data.min.js",
 		"node_modules/socket.io-client/dist/socket.io.slim.js",
+		"node_modules/localforage/dist/localforage.min.js",
 		"public/js/lib/jSignature.min.js",
 		"public/js/lib/leaflet/leaflet.js",
 		"public/js/lib/leaflet/leaflet.draw.js",

frappe/public/js/frappe/views/communication.js

@@ -591,26 +591,28 @@ frappe.views.CommunicationComposer = Class.extend({
 
 	save_as_draft: function() {
 		if (this.dialog && this.frm) {
-			try {
-				let message = this.dialog.get_value('content');
-				message = message.split(frappe.separator_element)[0];
-				localStorage.setItem(this.frm.doctype + this.frm.docname, message);
-			} catch (e) {
-				// silently fail
-				console.log(e);
-				console.warn('[Communication] localStorage is full. Cannot save message as draft');
-			}
+			let message = this.dialog.get_value('content');
+			message = message.split(frappe.separator_element)[0];
+			localforage.setItem(this.frm.doctype + this.frm.docname, message).catch(e => {
+				if (e) {
+					// silently fail
+					console.log(e);
+					console.warn('[Communication] localStorage is full. Cannot save message as draft');
+				}
+			});
+
 		}
 	},
 
 	delete_saved_draft() {
 		if (this.dialog) {
-			try {
-				localStorage.removeItem(this.frm.doctype + this.frm.docname);
-			} catch (e) {
-				console.log(e);
-				console.warn('[Communication] Cannot delete localStorage item'); // eslint-disable-line
-			}
+			localforage.getItem(this.frm.doctype + this.frm.docname, message).catch(e => {
+				if (e) {
+					// silently fail
+					console.log(e);
+					console.warn('[Communication] localStorage is full. Cannot save message as draft');
+				}
+			});
 		}
 	},
 
@@ -731,7 +733,7 @@ frappe.views.CommunicationComposer = Class.extend({
 			// saved draft in localStorage
 			const { doctype, docname } = this.frm || {};
 			if (doctype && docname) {
-				this.message = localStorage.getItem(doctype + docname) || '';
+				this.message = await localforage.getItem(doctype + docname) || '';
 			}
 		}
 

package.json

@@ -35,6 +35,7 @@
     "highlight.js": "^10.4.1",
     "js-sha256": "^0.9.0",
     "jsbarcode": "^3.9.0",
+    "localforage": "^1.9.0",
     "moment": "^2.20.1",
     "moment-timezone": "^0.5.28",
     "node-sass": "^4.14.1",

yarn.lock

@@ -3790,6 +3790,13 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 lie@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
@@ -3823,6 +3830,13 @@ loadjs@^4.2.0:
   resolved "https://registry.yarnpkg.com/loadjs/-/loadjs-4.2.0.tgz#2a0336376397a6a43edf98c9ec3229ddd5abb6f6"
   integrity sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA==
 
+localforage@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.9.0.tgz#f3e4d32a8300b362b4634cc4e066d9d00d2f09d1"
+  integrity sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"