Store a picture in a cookie

Question

I would like to store a small profile picture of my users in their browser so that they can see their profile picture (in the login form) each time they log in (when they tick remember me for example). I think hotmail is doing something similar.

Is it possible to store the image on the user computer and store the path in a cookie? It seems that the maximum size of a cookie is 4096 Bytes so it might be hard to store the image itself in a cookie. Do you have any ideas how I could do that?

score 15 · Accepted Answer · answered Jun 21 '12 at 00:55

15

Surely it's more efficent to store a link to an online image in the cookie, and use that instead?

Each time a webpage is browsed, the cookies get transmitted - storing an image will add unecessary bandwidth.

answered Jun 21 '12 at 00:55

Robbie

17,605
4
35
72

Transmitting the image each time will add more overhead unnecessarily - storing it in localStorage means this doesn't happen. – Jasper Mogg Jun 21 '12 at 01:03

score 12 · Answer 2 · edited May 07 '20 at 20:19

12

Store it in localStorage using JavaScript.

https://web.archive.org/web/20160313121817/https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/html5_code_example_store_images_using_localstorage57?lang=en

edited May 07 '20 at 20:19

CaldeiraG

152
2
14

answered Jun 21 '12 at 00:51

Jasper Mogg

924
2
8
23

This is awesome! This has the advantage to store the image locally and reduce network and server usage. The problem remaining is that we need to base64 encode the binary images, but php seems to do that easily: [base64_encode()](http://php.net/manual/en/function.base64-encode.php). – Mick Jun 21 '12 at 01:13
3

Caching have been in the HTTP protocol for almost two decades. Why do want to reinvent that? Send some cache headers for your image files instead and serve them as regular files, using standard `` elements. – Emil Vikström Jun 21 '12 at 01:21
Sounds good :-) Can you do that in JS only? (for my own project) – Jasper Mogg Jun 21 '12 at 01:23
I unfortunately can't accept both answers, but they are both very good answers. I accepted the one with the most up-votes. I will post the code for both answers. Thanks for this amazing answer Jasper :-) – Mick Jun 21 '12 at 01:33
Just for info, we can also base64 encode the binary images using this [encoder script](http://www.webtoolkit.info/javascript-base64.html) in javascript. – Mick Jun 21 '12 at 07:24

score 5 · Answer 3 · answered Jun 21 '12 at 00:53

5

Could you store the path to the image in a cookie and use the value to render it in the login screen?

answered Jun 21 '12 at 00:53

Paul Sham

3,185
2
24
31

How can you do this? – User1999 Nov 19 '17 at 22:43

score 5 · Answer 4 · answered Jun 21 '12 at 00:54

5

Why you don't want to store picture on server and store the path in cookie?

This looks more situable, then write additional data on user computer...

answered Jun 21 '12 at 00:54

DaneSoul

4,491
3
21
37

Transmitting the image each time will add more overhead unnecessarily - storing it in localStorage means this doesn't happen. – Jasper Mogg Jun 21 '12 at 01:03
1

@Jasper Mogg if image was seen befor, if should be cached by browser, so no additional transmitting nessesary – DaneSoul Jun 21 '12 at 01:31

Store a picture in a cookie

4 Answers4

Linked