I'm working with html canvas and creating a data URI to preview an image that the user can build himself. When he hits a preview button, the image gets displayed:
$("#show_label").html('<img src='+canvas.toDataURLWithMultiplier("png",1,1)+' width="157" height="202">');
Works fine. Now I want to save the dataURL in a cookie as I want to restore the image at a later stage on the website or store it in my database later.
$.cookie("current_label",canvas.toDataURL());
That won't work.
I understand that this is not a no-brainer, although it would make sense to store objects in a cookie as well. I guess I would have to encode the data URI and decode it later. But how? Researching didn't give me any results.
Also, could it be that cookies would become too large then so this is not even something to consider?
Should I store the dataURL in a SQL database instead and just use a cookie to identify the database entry (e.g. via ID)?
Any help appreciated.
Try using Web Storage objects.
Do you have to use cookies? Might I suggest using localStorage?
Example:
localStorage['aVariable'] = 'a Value';
//A week later this will still hold value:
alert(localStorage['aVariable'])
Related
I'm creating a react App that will periodically fetch Json Objects from an URL and display its content.
(example of an url i'm using: http://demo0046512.mockable.io/stream/anycontent ).
To increase flexibility to my project I want it to be able to display content when offline as well.
For that reason, when I first fetch for the urls in that Json object, I want to store their content to be able to acess it later, as the urls won't have any use when i'm offline.
To store the data I'm using localforage Api and my Idea was to create a Json Object just like the one I fetched, but every url would be replaced by it's content (text/image/video itself) and then store it with localForage to read from it when offline, but I haven't found a way to do that so far.
For instance: {ex1 : "https://video.com"} would be stored as {ex2: videoItself}
Can this be done?
Code for anyone interested (Ctrl + f and type " /*!! " for the problem)
https://pastebin.com/AagzuGmx
You want to cache the results you get back from the URL. Might these values ever change? If so, you probably want to keep the URLs; and the results you fetch from them. Something so if {ex1 : "https://video.com"} then {"https://video.com": video}
Edit:
The fact that you are caching is important here, including that it may change. But I understand what your question is now. You want to store things like videos using localForage. This can be done, but as the docs say, "All types are supported in every storage backend, though storage limits in localStorage make storing many large Blobs impossible." So the example you give, of a video, will only work for small videos. On mobile browsers, 5MB is the limit, and you might not even get that much because of how localStorage works. It only stores strings, so if strings are stored poorly (and they are in some versions of Android's browser), then you might only get 2.5MB. BTW, this limit is per domain, not file.
One more caveat: you have to encode/serialize these files before storing them. Will they just be videos? Also images? Media with metadata? Entire pages with media? Because the way you encode them might depend on that. If it's just one media type, you can encode it like the final setItem example from the docs. Then create a URI like the example does, which can be the src of an <img> or <video> tag.
I've got an object called 'output' that I need to display on the page. It is an image object. I tried to use the following code but it doesnt work. Any advice greatly appreciated.
document.getElementById("imageDiv").appendChild(output);
<div id='imageDiv'></div>
When I alert the object I got the following:
{"result":{"output":"data://path-to-file/background-32.png"},"metadata":{"content_type":"json","duration":9.845787767000001}}
How do I actually display the file?
You are using the ColorfulImageColorization API from Algorithmia.
It turns out that this service doesn't actually return the image data or a true URL path to the resulting image. Instead, it returns a pointer to where the image is stored in your data collection that you have set up with them. You can read about the various types of data collections and such on their Hosted Data page here
Also, from their comments sectiion:
Nir_Photomyne: Hey there! :) how to access the output using JS? I get the out put url but then what?? HELP
deeplearning: #Nir_Photomyne: There are a couple options depending on what you want to do with the images. The best option is probably to set the output location to s3,after setting up an s3 data connector at https://algorithmia.com/data
.
My personal opinion?
I'd see if I could find a similar API that is more straight forward and simply sends the image data in the response instead of storing the data.
http://jsbin.com/diwekox/edit?html,js,output
Do you just forgot the put on the image source attribute or something else?
I want to send some data from one HTML page to another. I am sending the data through the query parameters like http://localhost/project/index.html?status=exist. The problem with this method is that data remains in the URL. Is there any other method to send the data across HTML pages using JavaScript or jquery.
why don't you store your values in HTML5 storage objects such as sessionStorage or localStorage, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.
To store values for a session:
sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')
or more permanently:
localStorage.setItem('label', 'value')
localStorage.getItem('label')
So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..
I know this is an old post, but figured I'd share my two cents. #Neji is correct in that you can use sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value') (although he had the setItem parameters backwards, not a big deal). I much more prefer the following, I think it's more succinct:
var val = sessionStorage.myValue
in place of getItem and
sessionStorage.myValue = 'value'
in place of setItem.
Also, it should be noted that in order to store JavaScript objects, they must be stringified to set them, and parsed to get them, like so:
sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object
The reason is that sessionStorage stores everything as a string, so if you just say sessionStorage.object = myObject all you get is [object Object], which doesn't help you too much.
possibly if you want to just transfer data to be used by JavaScript then you can use Hash Tags
like this
http://localhost/project/index.html#exist
so once when you are done retriving the data show the message and change the
window.location.hash to a suitable value.. now whenever you ll refresh the page the hashtag wont be present
NOTE: when you will use this instead ot query strings the data being sent cannot be retrived/read by the server
Well, you can actually send data via JavaScript - but you should know that this is the #1 exploit source in web pages as it's XSS :)
I personally would suggest to use an HTML formular instead and modify the javascript data on the server side.
But if you want to share between two pages (I assume they are not both on localhost, because that won't make sense to share between two both-backend-driven pages) you will need to specify the CORS headers to allow the browser to send data to the whitelisted domains.
These two links might help you, it shows the example via Node backend, but you get the point how it works:
Link 1
And, of course, the CORS spec:
Link 2
~Cheers
This question is about pages like gmail or Facebook, which keep updating lively all the time.
If in a browser, such as UIWebView in iOS, where the live feeds do not seem to appear automatically, I wish to reload the page only if it was updated on the server. For this, is there a way to obtain last-update time of the document, something like the output of the unix command
ls -ltr filename
for an html document on the web server?
Or in general, how is this kind of problem tackled?
Thanks in advance,
Nikhil
Try this JS snippet:
javascript:alert(document.lastModified)
I would however suggest to implement something yourself as this may not give you accurate result all the time. You can generate a hash of some part of the live feeds and save the hash. Next time re-generate the hash and compare that hash with the saved hash and if the hash doesn't match, it means the content of the feeds has changed. Trigger the update method to fetch new live feeds and replace the old hash with the new hash in your local database.
I hope it helps.
I have the following situation: the user submits a form, I fetch the data from the server via an Ajax request and displays a chart. However, I want to give the user the option to display the data in the chart in table form or export as csv after he had submitted the form.
I was wondering what's the best solution to store the data, considering that I don't want the data to persist if the user opens a new window to submit the form again for example.
The application is in Rails.
Thanks.
You have a few options:
Cookies
LocalStorage
SessionStorage
More info: https://developer.mozilla.org/en/DOM/Storage
Non-standard:
window.name can store anywhere from 1mb up to 10mb depending on the browser. This is more of a hack, but is fairly stable. You would need to implement your own accessor/setter methods on this, where localStorage and sessionStorage have API's built in.
Personally i would recommend local storage if all your users browsers support it.
Its very simple to use and you can access it using these to methods.
localStorage.getItem("Itemkey");
localStorage.setItem("Itemkey","value");
localStorage.removeItem("ItemKey");
Its always a good way to go and this means you can assign each window a differnt local storage key and even remove the item when the window is closed, or unloaded !
For reference I found this very useful: http://diveintohtml5.info/storage.html
And combine it with storing JSON objects ( http://www.json.org/js.html ) and you have a very fast,simple and easy to use solution. OR even just store a string,array or what ever is required.