I could read in the Chrome storage API page that we can store string values inside Chrome storage against keys. Is there any way to store files against keys inside Chrome storage?
chrome.storage stores data as the JSON stringification of the values which it's given to store. So, yes, if you convert your file(s) into a form that can be converted to JSON (e.g. by JSON.stringify()), then the contents of the file can be stored. If the value that you are trying to store in chrome.storage can not be converted to JSON, then it can't be stored (e.g. DOM elements). chrome.storage does not inherently care what the data represents, only that it can be JSON stringified.
If you're asking, as stated in your comment, if it's a good idea to store thousands of different "files" totaling more than 5GB in chrome.storage, then the answer is: "NO!".
If you are looking for alternatives, then some are provided in Can you use HTML5 local storage to store a file? If not, how?
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 am using the webcrypto API with some success to encrypt messages between server and client (lets assume I need to do this manually).
My problem is that I need to check if a keypair for the user and server already exists instead of generating a new keypair all the time. Is there a way to check if it exists and retrieve it for decryption of server messages?
To clarify, my privateKey is on the browser and publicKey is sent to server.
I have a nodejs server and plain JS front end.
Thanks in advance.
CryptoKeys are not persistent by default. You need to store the keys in the IndexedDB to make them available to the next browser execution.
IndexedDB is a secure storage, keys can be stored, recovered and used without exposing the key material
See https://www.w3.org/TR/WebCryptoAPI/#concepts-key-storage
5.2. Key Storage
This specification does not explicitly provide any new storage mechanisms for CryptoKey objects. Instead, by allowing the CryptoKey to be used with the structured clone algorithm, any existing or future web storage mechanisms that support storing structured clonable objects can be used to store CryptoKey objects.
In practice, it is expected that most authors will make use of the Indexed Database API, which allows associative storage of key/value pairs, where the key is some string identifier meaningful to the application, and the value is a CryptoKey object. This allows the storage and retrieval of key material, without ever exposing that key material to the application or the JavaScript environment
Here you have a full example https://blog.engelke.com/2014/09/19/saving-cryptographic-keys-in-the-browser/
SOLVED:
You can use IndexedDB for storing CryptoKey objects.
I tried plain old local storage and it does not work.
For more info, see:
https://pomcor.com/2017/06/02/keys-in-browser/
https://www.w3.org/TR/WebCryptoAPI/
https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API
https://www.w3.org/TR/IndexedDB/
https://www.boxcryptor.com/en/blog/post/building-an-app-with-webcrypto-in-2016/
https://gist.github.com/saulshanabrook/b74984677bccd08b028b30d9968623f5
https://blog.engelke.com/2014/09/19/saving-cryptographic-keys-in-the-browser/
You should Use indexed DB to store Keys on the client side. The benefit of using Indexed DB is that you will be able to store keys as they are (mostly in CryptoKey form) and use them after retrieving from Indexed DB.
You won't have to export keys and then transform in some way like base64 encode or JSON encode as in case of other storage options like LocalStorage.
To make indexedDB usage easier, there is a promise based library available which is very often used by the tutorials and posts that cover indexed DB usage
I am using JavaScript to store an array in local Storage. Reading this site gave me the idea of using JSON.stringify to convert the array to a string before storing it. This code works to convert an array to a JSON string for local storage.
localStorage["search_history_record"] = JSON.stringify(search_history_record);
My problem has been retrieving the array from local storage. I can parse the array from the stored string in local storage (I checked this using console.log), but this parsed array will not save properly.
search_history_record = JSON.parse(localStorage["search_history_record"]);
I've been unable to find a solution in other stack overflow questions to solve this problem so far. Why would this console log the stored string back to an array properly, but not store the parsed string back to my local array?
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
Where are the data stored in local storage? Is it in form of some text or ASCII format or some other? Is it possible to store JSON data in text files (which can be regularly) updated and retrieve them back? I want to store some JSON data but since my requirement is not so big, I want to abstain from using a database for now.
Local storage can only store strings (any data you might have, have to be converted to string upon saving in storage and "revived" upon reading from it).
JSON data is more than fine to be stored as a string so it is good choice of format for keeping complex data in browser storage (either local storage or session storage).
You can learn more about storage here: http://diveintohtml5.info/storage.html
As to where the data is being stored, I imagine it varies from browser to browser but you don't have to worry about where is the data, since you don't have any direct access to it (only through storage API).
Edit: Quick note - I've found this article stating where is storage data stored by Firefox - https://developer.mozilla.org/en/DOM/Storage (see section "Storage location and clearing the data" at the bottom of the page).
I wrote a tiny script to allow storage, and reading of arrays, strings, and objects into local storage. IT even lets you modify nested keys within the objects you store. Here is a link to the tiny script. https://github.com/andresgallo/truStorage/blob/master/truStorage.js
Getting:
const got = JSON.parse(localStorage.getItem('my-key'));
Setting:
localStorage.setItem('my-key', JSON.stringify({ a: 'A' }));