How to Save Images to Local/Session Storage

How to Save Images to Local/Session Storage - JavaScript Tutorial

Рет қаралды 84,569

4 жыл бұрын

In today's video I'll be showing you how to save images to Local or Session Storage using JavaScript. This is easily achieved using the FileReader and data URLs.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
Follow me on Twitter @dcodeyt!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #webdev

Пікірлер: 90

@dcode-software 4 жыл бұрын

PLEASE NOTE: There are size limitations to Local Storage - as of Jul 2020 it appears to be around 5MB per origin. With this in mind, try to only save smaller sized images where necessary and if you need to save larger images, use a link instead :)

@CodeZhifty 3 жыл бұрын

I have this music player where i need to save my mp3 files to sessionstorage how do i work around this size limit? And does it even work with mp3 files?

@varunthecoder2389 3 жыл бұрын

sir use live server extension for refreshing

@janekiii 2 жыл бұрын

what do u mean by use a link? :)

@NiketBahety 2 жыл бұрын

@@janekiii It means that you can temporarily upload them somewhere and use that link like some cloud storage or someplace like that

@janekiii 2 жыл бұрын

@@NiketBahety thanks for the explanation :)

@derda4402 Жыл бұрын

I needed a way for users to upload one image to set it as their background and this works perfectly. I have just recently learned web dev so I haven't gotten to cloud storage, API, etc yet and I love how this easily fixed my problem

@chellovlogs 3 жыл бұрын

Thank you! That was exactly what I was searching for, and I couldn`t expect better explanation!

@joeydikgole6005 Жыл бұрын

Awesome tutorial. I'm loving this channel everyday. Thank you

@NiketBahety 2 жыл бұрын

Amazing tutorial very clear and precise and exactly what I was looking for. Thank you !!

@anikkhan8811 3 жыл бұрын

Eyy Mate! This is exactly what was I looking for! Many many thanks!

@louleg23 3 жыл бұрын

Very clear and helpful - just what I was looking for. Thanks.

@raymondmichael4987 4 жыл бұрын

That is real great brother, Greetings from Tanzania 🇹🇿

@israeluribe2010 3 жыл бұрын

Amazing! Helped me a lot. Thanks!

@awaismadni8811 9 ай бұрын

Thanks bro, it was pretty awesome, simple and quite straight-forward 💞

@smurffronda2951 3 жыл бұрын

thank you man, have a great week

@nicopostigo123 2 жыл бұрын

Great tutorial, thanks!

@christopherkuhn6117 3 жыл бұрын

Thanks, helped me a lot!

@s.w.swestern_gem3913 3 жыл бұрын

Thank you for saving my life I owe you 3000

@marimobaka95 2 жыл бұрын

omg u saved my mental health thank u so much

@juliocsfarias 2 жыл бұрын

Thank you guy!

@taher786... 2 жыл бұрын

a very straight forward video, thanks a ton man

@luisffernandezlopez3552 2 жыл бұрын

Thank you very much bro

@gopalloharnew5948 2 жыл бұрын

It's amazing !

@nikhilpatil8798 3 жыл бұрын

bro ur like a god

@user-kf1di5uw9i 2 жыл бұрын

Great! Thanks a lot

@dcode-software 2 жыл бұрын

You are welcome!

@alihoseynzadeh7267 2 жыл бұрын

verry helpful

@MsDEAD27End 4 жыл бұрын

Bro, this information is gold. thanks, by the way, how much space i have for save photos or for example, another files like pdf , word, excel etc

@dcode-software 4 жыл бұрын

A lot of this is about balance - remember you'd be saving it against the user's machine so if you can, try and save only what's required 😁

@reynaldoramos9564 2 жыл бұрын

This there a way to have the image show on innerHTML for example if I can using this code to generate an image for a book list application? TIA

@rizzz_one_4343 2 жыл бұрын

wow!!! thanks for it..

@noone-gr4is 3 жыл бұрын

this code is nicely organized/organised!

@anmolsingh6567 3 ай бұрын

Useful 🌟❣️❣️❣️❣️

@jagadeeshkumar2091 3 жыл бұрын

Thanks you!

@dcode-software 3 жыл бұрын

No worries mate

@guilhermealexander4855 2 жыл бұрын

my like, Thank you!

@dcode-software 2 жыл бұрын

No problem, thanks!

@maheshmorem5665 2 жыл бұрын

Perfect

@reactteamwdp7648 2 жыл бұрын

thank you so much sir

@dcode-software 2 жыл бұрын

You're welcome!!

@hmedh3476 3 жыл бұрын

Thank u

@noone-gr4is 3 жыл бұрын

+1 subscriber!

@atakan7901 Жыл бұрын

Thats perfect video thank you .I want to ask a question. why picture opens only while we refresh it? Doesnt it open when we press to open button ? Is this possible ?

@balenata9359 4 жыл бұрын

please what theme you use this color really nice and also your explination really nice

@thathojohannes1862 Жыл бұрын

How do I retrieve the image(using javascript) so that it can be displayed on another page?

@bangunny 3 жыл бұрын

this method will do the same with multi images right ?

@KantiOke 3 жыл бұрын

How to make it no refresh? One select file it will auto load? And once the main index is open the image will auto load. How to do it?

@yazeedmohamadalqahtani1814 4 жыл бұрын

Please make video about how to auto play video in javascript

@noone-gr4is 3 жыл бұрын

which font do u use?

@rodrigocabotajejr6214 2 жыл бұрын

So the image didn't save in the local folder instead, it become 64based image?

@PrilaRis 2 жыл бұрын

how do i download bulk images in twitter with coding in chrome developer tools?

@pantherking6857 3 жыл бұрын

does this work with videos?

@abd11868 3 жыл бұрын

great tutorial... can we send this data-url as json to server?

@clivegillham7910 Жыл бұрын

You sure can

@faridkharis Жыл бұрын

@@clivegillham7910 how to do it, any references?

@samyyoussef8380 2 жыл бұрын

helpful, but remeber in the upfront of ur video u said you will type 3,4 line codes, ended to be dilemma

@kishorgopal7113 Жыл бұрын

i am getting unexpected error when using query selector... please help to resolve that

@WindowsVista80 3 жыл бұрын

how do i make it so that all the pictures stay on the page

@TamilLatest 2 жыл бұрын

How do I do it with video?

@sherifsalah5563 4 жыл бұрын

What is the size limit for all browsers? I just checked (again) coz i tried to do this before but found out its not that usable in real world because of local storage limit on browsers is from 2 to 10 MBs which is extremely small for image's storage.

@dlol. 4 жыл бұрын

You could store a link to the image, saving you a ton of space

@dcode-software 4 жыл бұрын

Storing a link to the image is definitely a good alternative in the case of larger files

@ademineshat 3 жыл бұрын

@@dcode-software can you please give me a hint about storing link? I've tried but i can just get the filename not the link?

@lepystudio8974 2 жыл бұрын

@@ademineshat just add a input with the type=url and save it as string ... localstorage.setItem(url.value);

@lightcode6487 3 жыл бұрын

So will the images still exist on the page when you leave and go to it again? ANd nice video

@dcode-software 3 жыл бұрын

Yes they will

@lightcode6487 3 жыл бұрын

@@dcode-software Woooow nice that was exactly what I was looking for: Display a selected image in input and save it thank you very much also for this very quick answer. Left a sub too :)

@dcode-software 3 жыл бұрын

Appreciate that mate, cheers 🙂

@lightcode6487 3 жыл бұрын

@@dcode-software One more question: Is it possible to put multiple inputs and put in and save individual images in each of them? Like I've got a first input I put an image in and then I add a second input and put in another image?

@JoseFuentes-vm9ql 2 жыл бұрын

@@lightcode6487 i have the same question

@el4710 3 жыл бұрын

what folder the image save after uploaded?

@princejones0077 2 жыл бұрын

It isn't uploaded. it's saved in the browser's local storage as a database key thus converting it to base64 string first.

@search3923 Жыл бұрын

Only one file can upload and save 🙄,not multiple images can ..

@mehraj43 2 жыл бұрын

plzz tell your theme name

@codefoxx 3 жыл бұрын

fuck yea! I was looking for drag and drop but this is also good !

@abdelrahmanmohamed4990 8 ай бұрын

What if I want to make it appear just by clicking the choose btn? How can I achieve that plz? I love your channel by the way🤝❤️

@sosad7832 2 жыл бұрын

I have an error it says "this.files is undefined"

@forheuristiclifeksh7836 Жыл бұрын

3:02 how to treat many files not a single file?

@muhammadimadkhan7978 3 жыл бұрын

How can save image in local storage in an angular can any one help me

@codergirl5092 3 жыл бұрын

I need when someone choose a file then the image should be saved in my project folder...if anyone knows how to do kindly reply

@joebrock3496 3 жыл бұрын

you would need php for that, i suppose

@Selva982 Жыл бұрын

How to take snaps via print screen and store in word automatically

@user-yd7db3wd7w 3 жыл бұрын

That's all call but why would one store images in local storage? Isn't it inefficient?

@lukaskovar6921 3 жыл бұрын

BASE64 encoding takes about 26% more space than binary. It's not that bad.

@user-yd7db3wd7w 3 жыл бұрын

@@lukaskovar6921 I thought it's not about space but about time and resources it requires

@kittentothecode 2 жыл бұрын

@change="(e)=>console.log(e.target.files)" with Alpine.js