How do I make JavaScript PhoneGap apps to remember something? - javascript

I want to make a JavaScript PhoneGap app being able to store information, like log in data or for a savegame, but obviously I'm not able to write into files with JavaScript ansd since this is supposed to work offline I am also not able to run a server script that manages it for me.
I'm pretty sure there is a way to do this and I'd be very thankful for your help!

You can use local storage. Local storage only stores strings, so you'll probably want to serialize JSON when saving to local storage. See is a breakdown of local storage size by browser.
var myData = { foo: "bar" };
localStorage.setItem("myData", JSON.stringify(myData));
var retrievedDataString = localStorage.getItem("myData");
var retrievedData = JSON.parse(myDataString);

Just like "dfsq" sayed, have you tried localStorage?
localStorage.userToken = "SomeData";
But remember, localStorage can only storage a max of 5mb of data and all the data is stored as String, for more than this or more flexibility with the type you will need another solution for your problem.

You better use a database. One of the good options are Firebase. https://www.firebase.com/ . Try its tutorial. It gives you offline capability as well. Also its FREE. ( For 50 concurrent connections )

What about using SQlite plugin for phonegap/cordova?
Cordova SQLite plugin

Many users, many solutions. In my mind the best way to do this would be with a WebSQL Database. You may have a look at http://www.html5rocks.com/de/features/storage - i know this site is in german but the graphic displayed there will give you a little overview. You'll see where you can use what kinds of databases.
WebSQL works like a charme and every of my apps with databases uses webSQL Databases. Its not just a good solution, it is the best one to be consistency. Normally you're using a MySQL DB on a WebServer for Logindata etc. if you have already all your data localy stored inside a WebSQL Database, you have also consistency of your

Related

pouchdb or alternative where I can control how much data stored locally?

In the design stage for an app that collects large amounts of data...
Ideally, I want it to be an offline-first app and was looking to Pouchdb/Counchdb - However, the data needs to be kept for years for legal reasons, and my concern is that this is going to consume too much local storage over time.
My thoughts were:
handle sync between pouchdb and couchdb myself, allowing me to purge inactive documents from the local store without impacting the couchdb. This feels messy and probably a lot of work
Build a local store using dexie.js and completely write the sync function. It also looks hard work, but may be less as I'm not trying to mess with a sync function
Search harder :)
Conceptually, I guess I'm looking for a 'DB cache' - holding active json document versions and removing documents that have not been touched for X period. It might be that 'offline' mode is handled separate to the DB cache..
Not sure yet if this is the correct answer..
setup a filter on couchdb to screen out old documents (lets say we have a 'date_modified' field in the doc and we filter out any docs with date_modified older than one month)
have a local routine on the client that deletes documents from the local pouchdb that are older than one month ( actually using the remove() method against the local pouchdb, not updating it with _deleted:true) - from https://pouchdb.com/2015/04/05/filtered-replication.html it appears removed documents don't sync.
docs updated on the Pouchdb will replicate normally
there might be a race condition here for replication, we'll see

Storage method while learning angularjs

I'm currently learning angularjs and trying to build a listapp.
I'm struggling with deciding which method of storage I should be using while building the prototype.
Currently I'm using an object that I bind to the scope but it's not working very well for me.
Listname
List type
List item
text
done
I want to be able to add, delete and edit from the storage.
Any suggestions, links, tutorials, guidance or whatever is appreciated!
Also I'm planning to move over to firebase later (I feel it just adds an extra layer of complexity atm while I'm learning angular).
For learning/prototyping you can use MongoLab database as a storage (up to 500 MB it's free). As MongoLab database is hosted, you don't have to care about configuring your development environment (i.e. installing database server, database client, or anything else). You just create some simple database on the web page (via GUI admin tool) and then use an URL in angularjs code like:
var url = "https://api.mongolab.com/api/1/databases/angularjs-intro/collections/users?apiKey=terrPcifZzn01_ImGsFOIZ96SwvSXgN9";
return $http.get(url);
See how it was used in this AngularJS tutorial.
if you're just learning/prototyping, local storage should suit your needs.
localStorage.setItem('key', 'value');
localStorage.getItem('key'); // returns 'value'

Access SQLite database from JavaScript application?

We have an SQLite database lying around, which is curerntly filled from an external batch job. The database is not very complex (essentially two tables in a 1:n relationship and some "catalog tables" holding lookup values).
We now have to add a user-frontend as well as some reporting. At one moment in time only one user is using the frontend, however, this should be possible from everywhere in our network (= wherever access to the SQLite file is possible).
What's the easiest way to create an easy-to-use frontend with as little effort as possible? I thought about using HTML/JS, but haven't found out how to access a local SQLite DB with JS (is this even possible? we could grant the application such access rights of course, however, do browsers even support this?)
If HTML/JS is not an option without a dedicated server, is there any other possiblity to get this done with little effort? We do not want to end up with MS Access... :(
Use the HTA application if not afraid of safety problems. Rename your html file to *.hta, make ODBC connection to your database then:
var Connection = new ActiveXObject ('ADODB.Connection');
Connection.Open (<ODBC-name>);
var Records = new ActiveXObject ('ADODB.Recordset');
Records.Open (Sql, Connection, 0, 2);
See the Properties & Methods for ADO Recordset Object.

Create database in WebSQL

Been at this for hours and hours without end debugging why my CREATE TABLE statement failed.
Tested it within a MySQL database and it works just fine. But for some reason all my SELECT's can't get my login table like it doesn't exists(The error says).
Here is my SQL for creating the table.
CREATE TABLE IF NOT EXISTS login(
id SMALLINT NOT NULL PRIMARY KEY AUTO_INCREMENT,
user_type SMALLINT NOT NULL,
user_data text NOT NULL,
created_on datetime NOT NULL DEFAULT "0000-00-00 00:00:00"
);
I just cannot see where the error is. One other major issue is that after hours while googling i haven't found any solid wiki that provides enough information about the API for me to really use it. So i had to jump around from site to site to get bites of information.
Hope someone can help me sort out the issue with the Query.
I am sry for posting the issue. Already found what i done wrong.
Here is the solution for anyone else who might encounter the same thing.
I simply wrote "AUTO_INCREMENT" as in MySQL where i had to be "AUTOINCREMENT" without the _
Just as a friendly note, the WebSQL Standard isn't recommended: Is it recommended to use the web sql database for storage on the client side
For a different Client-Side Relational Database Solution, try: SequelSphere
It is an HTML5 Relational Database Engine that supports SQL and stores it's data in Local Persistence. It does not use WebSQL databases, but rather is its own SQL engine. As such, it will work in any JavaScript compliant browser. While it currently only supports Local Storage, very soon SequelSphere will support other local persistence engines such as IndexedDB and File API.
For full disclosure: I am related to the company SequelSphere. :)

Store Javascript variable client side

Not duplicate : I've read many questions like this and it always ended up "use PHP or server-side stuff, and watch out for injection/data manipulation".
I want to store simple stuff on the client side (save and load), like a Google Map location, and want it to stay between refresh of the page.
I don't want to use PHP or any server-side thing.
How can I proceed ?
Thanks
You can use cookies or localStorage.
If html5 is not a problem I would say localstorage is the way to go:
//set value
localStorage.setItem('todoData', this.innerHTML);
//read value
if ( localStorage.getItem('todoData') ) {
edit.innerHTML = localStorage.getItem('todoData');
}
ripped from
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-learning-about-html5-local-storage/ :-)
There are multiple options to store data in client side - IndexedDB, localstorage, webSQL, SessionStorage, Cookies, etc.
IndexedDB
Data can be queried efficiently. No limitation in size( but volume or
disk drivers limits the size )
It will store in Key-Object format
It will not be supported in safari browser
Support Queries
Asynchronous
localstorage
It will store value in key-value format (value should be always
String)
Synchronous
Helpful if you need to store a small amount of data
Limited size (Depends on browser)
Session Storage
If the user closes the tab, it will clear the data
You can check YDN-DB here
The key issue you have to keep in mind is you can't trust the client. If it's okay for the client to ask for any location, then it's okay for you to store the location on the client side. But you can't confirm that the value that you get back from the client side is one you have given to that client.
That's what it meant by "data manipulation" [injection is a special type of data manipulation, in that it is manipulated to include things like end quote marks if you're using it as part of a SQL query or other script.]
I highly suggest using localStorage for a few reasons:
It's supported by modern browsers,
INCLUDING IE.
You can store up to 5MB of data (10 in IE) where as a cookie is mere 4KBs
There's lots of libraries to make this easy. One of the most popular is LawnChair: http://westcoastlogic.com/lawnchair/ This will actually write to multiple places, including cookies, so that data isn't lost easily.
Also, as a note, you can't store objects with localStorage, just like you cant with cookies, however you can convert them. For example, if you want to store a Date() don't store it as new Date() store it as: '\'+Date().getTime()+'\'. Same for other objects.
Use Cookie.
How to access via javascript.
How about storing it in a cookie?
For JavaScript I recommend using jQuery, which simplifies a lot of work.
e.g. http://plugins.jquery.com/project/Cookie
Take a look at HTML5 Local Storage

Categories