So I am making a pretty simple Chrome content script (or should be if it's allowed).
So I want to be able to save certain things on a webpage for future reference. So for example, say I go to quora and search for something. I want to be able to hold onto that query for, say, a the next few webpages the user goes to. I was thinking if I could save values to a database from a content script that would work, if not just a simple way to save it in a cookie or something could work.
Any thoughts? Is this possible with a content script?
localStorage
There's a special API to store small amounts of data in browser called localStorage. It is very useful to store key-value pairs.
localStorage["key1"] = "value1";
console.log(localStorage["key1"]); // value1
The point is that localStorage is similar to cookies in terms of data persistence. This means you can get saved data even after you exit the browser.
Nice read about localStorage: http://diveintohtml5.info/storage.html.
chrome.storage (best way for you)
Actually, Chrome has its own analogue of localStorage. It's called chrome.storage API. If you use content script, I think this is the best way for you. The point is that your content script can directly access data, there's no need of background page. And it also should be mentioned that you can store objects using chrome.storage (localStorage stores only strings).
As usual, there's a nice documentation from Google for its API: http://developer.chrome.com/extensions/storage.html
IndexedDB
If you need to store big amounts of data, the best way to do it is to utilize browser databases, such as IndexedDB or Web SQL (Alert! Web SQL is deprecated since 2010).
Read more about IndexedDB:
https://developer.mozilla.org/en/docs/IndexedDB
http://www.html5rocks.com/en/tutorials/indexeddb/todo/
More about Web SQL:
http://html5doctor.com/introducing-web-sql-databases/
Related
I need to programmatically store data on the client side without having to transfer the data from the server on every page load. I considered generating a dynamic JavaScript file with the needed data for the current session of the user and make sure it is cached, but that seems really messy and there are a few drawbacks I can think of to such an approach.
How can I go about storing persistent data on the client side?
You can use the Web Storage API (Window.localStorage or Window.sessionStorage). Check out this article on html5doctor for a more in-depth explanation. The Web Storage API is supported by all modern browsers at this point.
The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
https://developer.mozilla.org/en/docs/Web/API/Window/localStorage
As highlighted above:
To store the data indefinitely (until the cache is cleared), use Window.localStorage.
To store the data until the window is closed, use Window.sessionStorage.
There are two methods of setting and getting properties via the Window.localStorage and Window.sessionStorage API's:
Access the properties directly:
localStorage.name = 'ashes999';
console.log(localStorage.name); // ashes999
delete localStorage.name;
console.log(localStorage.name); // undefined
sessionStorage.name = 'ashes999';
console.log(sessionStorage.name); // ashes999
delete sessionStorage.name;
console.log(sessionStorage.name); // undefined
Use the Storage.setItem, Storage.getItem, and Storage.removeItem API methods.
localStorage.setItem('name', 'ashes999');
console.log(localStorage.getItem('name')); // ashes999
localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // undefined
sessionStorage.setItem('name', 'ashes999');
console.log(sessionStorage.getItem('name')); // ashes999
sessionStorage.removeItem('name');
console.log(sessionStorage.getItem('name')); // undefined
Caveats:
Browsers may impose limitations on the storage capacity per origin of the Web Storage API, but you should be safe up to 5MB.
The Web Storage API is limited by the same origin policy.
Access to Web Storage from third-party IFrames is denied if the user has disabled third-party cookies in Firefox
You may store data in window.name, which can hold up to 2MB of data (!).
/* on page 1 */
window.name = "Bla bla bla";
/* on page 2 */
alert(window.name); // alerts "Bla bla bla"
Edit: Also have a look at this Ajaxian article regarding this.
Note that other sites in the same tab/window does also have access to window.name, so you shouldn't store anything confidential here.
If you really need to do this (and I definitely have doubts that it's a good idea at all), your extra javascript file idea isn't as bad as you think. Just use JSON notation to keep the data and it's pretty easy to load and unload as needed. If you keep in some well-thought-out logical divisions you should be able to update just parts of it on demand, as well.
What about Google Gears. It is made for offline storage, but I think it might work.
http://code.google.com/apis/gears/design.html
From the documentation:
Storing User's Data
Applications that are more than just
static files have data that is
typically stored on the server. For
the application to be useful offline,
this data must be accessible locally.
The Database module provides a
relational database for storing data.
On the Architecture page you will find
a discussion of strategies for
designing the local storage that your
application needs.
When an offline application
reconnects, you will need to
synchronize any changes made in the
local database with the server. There
are many different approaches to
synchronizing data, and there is no
single perfect approach. The
Architecture page describes some
strategies for synching.
An additional feature of the Gears
database is Full-Text Search,
providing a fast way to search text
within a database file. Read the
details here.
The Web Storage API has a limit of 5MB for local storage, but it's possible to store greater amounts of data on the client-side using IndexedDB. In some newer browsers, it is also possible to cache data for offline use using Service Workers.
URL fragments can also store client-side data, though they can store only a few thousand characters in most browsers.
Client-side storage is usually limited to just one origin, though it is possible to share it between origins using postMessage().
I have read about HTML Filesystem and LocalStorage but I'm not sure what is the best way to implement what I need, if it is all possible.
Basically what I need is for the browser to store some data, preferably XML format, and then send this to server. My ideal implementation is writing to a text file and then uploading this file to the server. But I understand this is not possible to do locally in browsers.
Also I read that Filesystem is not being supported anymore. So is Localstorage the only option to store information in client side?
The biggest problem I would have with Localstorage is that I might have multiple pages, but I need all of them to write to one place.
For example let say I have a web app and the user starts with page A, then navigates to page B and then page C and so on. I need to store some information on each page, and then finally, say page D, I want to send all the previously stored data to the server.
So firstly, am I trying to do something impossible?
If not, what is the best way to go about this?
Thank you.
To simply answer your question, yes, you can achieve that. You can store anything in key value pairs in the local storage from different pages and you can send it to the server whenever ready. You can also look at session based storage if you want it to be saved only for a session.
I am trying to understand the features of the localStorage. Suppose, I am storing large json via localStorage. I want the stored data to be shown to the testing team. If I display the stored data in a HTML page and then send the link to the testing team then they will see null, as localstorage stores data locally. The data is too large to copy/paste in a .txtfile. Is there any way of displaying localStorage data, so that it can viewed by others remotely?
The clue is in the name - local storage is local.
There is a work around in that you use iframes and the postMessage API to access localStorage from an external domain.
Is it possible to use HTML5 local storage to share data between pages from different sites?
As Jack Zelig points out, localStorage is local. But it is not only local to the domain but also to the particular browser on the particular machine. You cannot share it between browsers nor between devices. There is no work-around for that. To show it to remote people, you MUST be storing it or sending it through a server to which both devices/browsers are connected, at which point localStorage is irrelevant.
Think of localStorage as a new, improved version of cookies.
I am using Google Map API to do address translation(mainly by geocoder).
And I'd like to store results into local database for future use since google map has a limit on total query number and frequency.
But how? I have googled and found an ActiveX based solution. Is there platform independent alternatives?
To access a database you are going to need a server side language. JavaScript can talk to PHP through AJAX and PHP can update the database with whatever parameters you give to it via JavaScript.
I would stay away from ActiveX as it can be tricky and you just dont need it.
When you have a database setup, have a look at these websites
http://www.tizag.com/mysqlTutorial/mysqlinsert.php
http://api.jquery.com/jQuery.ajax/
Current in-browser database options include IndexedDB, Web SQL, and Web Storage.
Browser support, however, isn't all that good. Web Storage is your best bet, but it won't work on IE7 and earlier.
How to store a list in the web sql or any type of storage in the browser,
I have found three ways to store data in the browser, i.e. localstorage,session storage and web sql with html5 so i need to store the java.util.List in the browser and need to modify it at in future so is there any way to do so?
I'm not sure - you need to store and manipulate the 'List' on the server or on the client?
In the first case you may use session. In second case you can't use session because you can not access session variables in javascript.
In such situation I'm usually creating hidden field (if it's something page related) or cookie (if it's something application related). Using base64 you may pass transformed to string List to the client, modify them and save. Of course later you may read the data on the server.
I got the answer, we need to first take the list in local var in the page and than through javascript iterate it and store in the local browser db.