How to Save Images to Local/Session Storage - JavaScript Tutorial
HTML-код
- Опубликовано: 19 июл 2020
- 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
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 :)
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?
sir use live server extension for refreshing
what do u mean by use a link? :)
@@janekiii It means that you can temporarily upload them somewhere and use that link like some cloud storage or someplace like that
@@NiketBahety thanks for the explanation :)
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
Thank you! That was exactly what I was searching for, and I couldn`t expect better explanation!
Awesome tutorial. I'm loving this channel everyday. Thank you
Amazing tutorial very clear and precise and exactly what I was looking for. Thank you !!
Very clear and helpful - just what I was looking for. Thanks.
Eyy Mate! This is exactly what was I looking for! Many many thanks!
That is real great brother,
Greetings from Tanzania 🇹🇿
Amazing! Helped me a lot. Thanks!
Thanks bro, it was pretty awesome, simple and quite straight-forward 💞
thank you man, have a great week
Great tutorial, thanks!
Thanks, helped me a lot!
Thank you for saving my life I owe you 3000
omg u saved my mental health thank u so much
Thank you guy!
Thank you very much bro
It's amazing !
a very straight forward video, thanks a ton man
Useful 🌟❣️❣️❣️❣️
bro ur like a god
verry helpful
wow!!! thanks for it..
this code is nicely organized/organised!
Great! Thanks a lot
You are welcome!
+1 subscriber!
Thank u
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
please what theme you use this color really nice and also your explination really nice
my like, Thank you!
No problem, thanks!
Perfect
Thanks you!
No worries mate
thank you so much sir
You're welcome!!
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
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 😁
this method will do the same with multi images right ?
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 ?
How do I retrieve the image(using javascript) so that it can be displayed on another page?
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?
which font do u use?
how do i download bulk images in twitter with coding in chrome developer tools?
Please make video about how to auto play video in javascript
So the image didn't save in the local folder instead, it become 64based image?
great tutorial... can we send this data-url as json to server?
You sure can
@@clivegillham7910 how to do it, any references?
does this work with videos?
how do i make it so that all the pictures stay on the page
i am getting unexpected error when using query selector... please help to resolve that
helpful, but remeber in the upfront of ur video u said you will type 3,4 line codes, ended to be dilemma
How do I do it with video?
So will the images still exist on the page when you leave and go to it again? ANd nice video
Yes they will
@@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 :)
Appreciate that mate, cheers 🙂
@@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?
@@lightcode6487 i have the same question
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.
You could store a link to the image, saving you a ton of space
Storing a link to the image is definitely a good alternative in the case of larger files
@@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?
@@ademineshat just add a input with the type=url and save it as string ... localstorage.setItem(url.value);
fuck yea! I was looking for drag and drop but this is also good !
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🤝❤️
3:02 how to treat many files not a single file?
what folder the image save after uploaded?
It isn't uploaded. it's saved in the browser's local storage as a database key thus converting it to base64 string first.
Only one file can upload and save 🙄,not multiple images can ..
How can save image in local storage in an angular can any one help me
How to take snaps via print screen and store in word automatically
plzz tell your theme name
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
you would need php for that, i suppose
I have an error it says "this.files is undefined"
That's all call but why would one store images in local storage? Isn't it inefficient?
BASE64 encoding takes about 26% more space than binary. It's not that bad.
@@lukaskovar6921 I thought it's not about space but about time and resources it requires
@change="(e)=>console.log(e.target.files)" with Alpine.js