Save to local storage, canvas and image should always remain

[Chigoz]

Hi friends,
How do I save the variable mybytes holding the data to local storage so that the circles(images created after you drag and drop the Midi file) will always remain on the browser even if web page is reloaded?

How do I make the canvas to always remain even if the web page is reloaded?..is that possible?

This is the link to the codes

p5.js Web Editor

This is the link to a Midi file, you can download it, the drag and drop on the canvas.

PracticeMidi.mid

I am looking forward to your help
Thanks

[mnse]

Hi @Chigoz,

Take a look here as a starting point…

Local Storage in JavaScript with p5.js

Cheers
— mnse

[GoToLoop]

storeItem()

Creating and Populating a Table From Scratch

I’ve made a sketch that stores and reads an array of CSV row strings from the browser’s local storage using storeItem() & getItem() respectively; then converts that array to p5.TableRow objects; and finally use p5.Table::addRow() to populate a p5.Table container: http://p5js.org/reference/#/p5/getItem http://p5js.org/reference/#/p5.Table/addRow Each mouse click adds a new p5.TableRow to the p5.Table container, updating the browser’s local storage as well. …

How to extract value from an array of multiple JSON urls?

This is my attempt for your sketch: Basically I’ve declared a global variable loads, which keeps the current number of active loadJSON(). When loads is decreased back to 0, via callback decreaseCounter(), function generateOutput() is called back.

[Chigoz]

Thank you very much, I will check out and implement your answer.

[Chigoz]

Thank you very much, I will check out and try implement your answer.