# Save to local storage, canvas and image should always remain
**URL:** https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162
**Category:** Coding Questions
**Created:** [June 7, 2023, 4:48pm UTC](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162 "2023-06-07T16:48:55Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [June 7, 2023, 4:48pm UTC](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162/1 "2023-06-07T16:48:55Z")
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](https://editor.p5js.org/Chigoz/sketches/1w8R6hmY6)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
This is the link to a Midi file, you can download it, the drag and drop on the canvas.
> **[PracticeMidi.mid](https://drive.google.com/file/d/1FgLRyXZtMJ1KmqnFkcCIkjYpuHG33sdH/view?usp=sharing)**
>
> Google Drive file.
I am looking forward to your help
Thanks
---
### Author:  [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [June 7, 2023, 5:09pm UTC](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162/2 "2023-06-07T17:09:32Z")
Hi @Chigoz,
Take a look here as a starting point…
> **[Local Storage in JavaScript with p5.js](https://thecodingtrain.com/tracks/p5-tips-and-tricks/more-p5/local-storage/)**
>
> What's the easiest and quickest way to have a p5 sketch re-start from where it last left off? Local Storage!
Cheers
— mnse
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 7, 2023, 5:14pm UTC](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162/3 "2023-06-07T17:14:37Z")
[**storeItem()**](https://p5js.org/reference/#/p5/storeItem)
> [@Creating and Populating a Table From Scratch](https://discourse.processing.org/t/creating-and-populating-a-table-from-scratch/12658/3):
>
> 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: card_index_dividers[http://p5js.org/reference/#/p5/getItem](http://p5js.org/reference/#/p5/getItem)[http://p5js.org/reference/#/p5.Table/addRow](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?](https://discourse.processing.org/t/how-to-extract-value-from-an-array-of-multiple-json-urls/41398/15):
>
> This is my [attempt](https://OpenProcessing.org/sketch/1875469) 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.
---
### Author:  [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [June 7, 2023, 5:40pm UTC](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162/4 "2023-06-07T17:40:43Z")
Thank you very much, I will check out and implement your answer.
---
### Author:  [@Chigoz](https://discourse.processing.org/u/Chigoz)
#### Post date: [June 7, 2023, 5:41pm UTC](https://discourse.processing.org/t/save-to-local-storage-canvas-and-image-should-always-remain/42162/5 "2023-06-07T17:41:17Z")
Thank you very much, I will check out and try implement your answer.