I'm working on a bookmarklet (Javascript that is triggered from a bookmark) that overlays an image over a webpage in order to check if the html is consistent with the design. (it uses opacity)
I want to save the reference-image on a per-url-basis. I have three options as far as I know:
- save the path in a cookie
- save the path in local storage
- save the image in local storage
I'm currently planning to use local-storage to save the image. The pros are that It works een if the original image is removed and it syncs between diffrent computers in chrome. I don't know of any cons. I don't need pixel-perfection in IE7, so browser support is fine.
What is the best approach?
Answer
Sure, you can save images and/or the url to localStorage.
However, since localStorage only takes string you need to first convert the image to data-url either by serving the image as such from the server, or convert the image by the use of canvas (note that canvas can normally only set images from same origin, and of course canvas is not available in IE7 without a polyfill).
A better approach is perhaps to use indexedDB or the new File API (currently poorly supported, so far only Chrome) which allow you to request large storage space and it can save the image directly (as a Blob).
The images will be stored as you serve them (unless you rescale and re-compress using jpeg in canvas) so pixelation or quality reduction shouldn't be an issue.
IE7 does not support localStorage so you would need to revert to UserData (limited to 4 mb IIRC) or cookies with the url instead, in this case.
Though -
If it's not that important to keep the original image locally I would rather suggest to serve the image with a late expire data in its header.
This way it stays in the cache until the user deletes it or it expires. It you have restriction on traffic to your server then localStorage/indexedDB is probably a better option.
No comments:
Post a Comment