How to copy & paste from/to different browser tabs


I don’t find the success way to copy/paste elements from a browser tab to another one.

My idea is to save the content of the clipboard class into the HTML5 Web Storage (localStorage) this way:

       const getClipboard = modeler.get('clipboard').get();

       localforage.setItem('bpmn', getClipboard).then(value => {
          console.log('Value: ', value);
       }).catch(error => {
          console.log('Error: ', error);

and restore it from localStorage before execute the paste action:

       localforage.getItem('bpmn').then(value => {
       }).catch(error => {
         console.log('Error: ', error);


Make sure that you JSON.stringify the clipboard contents and deserialize them before putting them back to the clipboard. Other than that, the code you’ve pasted looks good to me.

// copy
var clipboardContents = JSON.stringify(modeler.get('clipboard').get());
localforage.setItem('bpmn', clipboardContents);

// paste
localforage.getItem('bpmn').then(function(value) {

  var clipboardContents = JSON.parse(value);


I’ve detected the problem. It’s the JSON.stringify or the JSON.parser

If I do the following it crashes as well:

// copy and paste in the same function:

var getClipboard = modeler.get('clipboard').get();

// it would return the origional clipboard content, not the case!
var myClipBoard = JSON.parse(JSON.stringify(getClipboard)); 


Something is getting lost when stringify or parse the content of the clipboard.


Is there an alternative to JSON.stringify / JSON.parser to serialize data in Javascript?


It looks like the descriptor contains hidden, non-enumerable fields. Could you diff getClipboard and JSON.parse(JSON.stringify(getClipboard))?


The original clipboard data is:


The $descriptor and $model properties are read-only and cannot be copied.

The stringify and parsed clipboard data is:


The __proto__properties inside oldBusinessObject have disappeared.


So, we might assume inside our code that oldBusinessObject is an actual model instance rather than a plain object.

You could use the second reviver argument to JSON#parse to re-instantiate the object(s) with the correct types based on the $type attribute.


I’ve created an example that should help you out.


Thank you very much for your interest and for the effort in the response.

I am very grateful. I take my hat off to you.