Best practice to store data locally for web - javascript

I'm working on some web application and we need to store number of javascript objects in local storage. Until now we did it using cookies but we want to use one of HTML5 storage solutions because cookies data is send to server on each server call and it is a waste of resources and also it's size is very limited. The data should be stored permanently, I mean it should be available after closing the browser and opening it again.
What is the best practice to do this? Is there any way to store objects in local storage. Thanks for the assistance

In my current project I'm using PouchDB library (http://pouchdb.com/). It is a lightweight javascript database which can store data locally in browser (string, int, object etc). All stored data are still available after browser restart.
You should use it with some JS framework, in my case it is AngularJS (very simple integration).

Have a look at this link: http://slides.html5rocks.com/#web-storage
It sounds like HTML5's Local Storage is definitely a great option for you. That presentation has a lot of great info in that should help you decide on the best form of storage.

IndexedDb is a good option for storing javascript objects.
I strongly recommend you to read this -> https://developer.mozilla.org/en-US/docs/IndexedDB

Related

How do I save client side data from a vue single page app to something like a excel or pdf file so the user can download it on a button click [duplicate]

I'm interested in building a small offline webapp and I'm looking for some advice. Here's the basics of what I want it to do
Create reports that, initially, will just have a name and text field
List, edit, and delete these notes
Ideally I'd like to add more fields to the reports later
Is localstorage a good option for storing this type of data locally? If so, can anybody direct me to a complete list of the commands for interacting with it in javascript? e.g. setItem, getItem, etc.
Thanks.
localstorage will work just fine for this, but don't think of it as a robust solution.. It's just a basic key/value store and won't be very performant with thousands of complex things going on.
Check out the excellent Dive into HTML5 guide on localstorage:
http://diveintohtml5.info/storage.html
Link to the localstorage apis
Yes localstorage would be perfect for you application. It would allow your application to have no need to connect to a server at all. Keep in mind that local storage does have maximums on the amount of data that can be stored.
EDIT:
Using JSON.stringify() on can convert complex javascript objects to json which can be storage and retrieved with ease inside of local storage.

Is possible to use the browser storage as a data repository?

With Javascript, exist some way to do a data repository (like the repository pattern for example), using the local storage of the browser? If exist, which compatibility issues between browsers will be found?
I believe this is what you are looking for:
http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/
It explains how to use the local storage on newer browsers(HTML 5 enabled) without the need for cookies.
I dont think it is possible to save data on browser storage.
other things you can do is using other ways to control that.
1st Way:
data you need to save for the entire session of the user you can globalize in your web by just declaring it as Global variable.
2nd Way
You can use the jQuery plugin called Cookie, you can find it in here
cookie will basically means saving for a longer term then the session. and it is ,in fact, saving data on the user's computer.
My personal suggestion : if you absolutely need to save data and a lot of it in a way, i would either suggest you to save it on your sever (if you have any) or by cookie.
If this answer wasn't enough satisfying for you, please comment and i will try to be more accurate and helpful.

Dirty update for web based mobile app

I have the folllowing tech stack:
SQLServer/MVC4/WebAPI backend and a HTML5/JqueryMobile frontend. Data transferred via JSON.
I would like to know how I can reduce the data tranferred via JSON. i.e. I don't want get data I already have from the server?
Are there any libraries, or design patters to use or research to help me in this. What is the architecture commonly used to solve this.
To minimise transferred data. You can use local caching.
HTML5 local storage and sessionStorage.
http://www.w3schools.com/html/html5_webstorage.asp
If you will be handling real time data I like using Signal R to enable push updates to active subscribers, avoids the need for polling.
http://www.asp.net/signalr/
Remember to enable your webserver to cache data where appropriate.
Finally good old fashioned analysis of your objects to make sure you are not sending unecessary data. JSON.NET will allow very good control of what items appear in your serialized output.

Persistent data for PhoneGap apps

EDIT#2 - The replies until now (after 2 days) are personal opinions and preferences and not an analysis of the various options that an offline-phoneGap app has to store simple data easily across all relevant devices. As such I haven't accepted any answer, but I am following this question.
I am a little confused about which format of persistent data I should be looking into for a PhoneGap web app I'm building. I've been researching this but things are not clear given my mediocre requirements.
The app is an educational app with about 100 or so multiple choice questions and some memorization games attached.
The app once downloaded can remain offline.
It is for all phonegap supported devices.
The only data that I want to read and write is the user's performance, number of times wrong in total, per card etc and any high scores for games.
This is all very basic information and could be held in very simple js objects.
I would like it to be a fairly simple solution and very easy to maintain/repeat.
What would be my best option? The phonegap file api? json/lawnchair? local-storage? cookies? Would there be a way to 'update' the app and keep it as an object in the javascript? websql? sqilite? Storage API?
Some of these seem overkill.
EDIT
Are there differences in devices and I should do some device detection and use different technologies?
I personally like localStorage. It's straight forward and works great for most situations.
If you are just recording the data you mention above, localStorage would be perfect. I would just seralise your data objects by turning them into a string using say JSON.stringify(), then when pulling it back in use JSON.parse() to turn it back into a useable JS object.
How about try out my library http://dev.yathit.com/ydn-db/getting-started.html backed by IndexedDB (excellent performance, query by index scan), WebSQL (good performance, SQL query) or localStorage (fair performance, no query, get by key, 2.5 MB limit).
db = new ydn.db.Storage('test-store');
db.put('store1', {test: 'Hello World!'}, 123);
req = db.get('store1', 123);
req.done(function(record) {
console.log(record);
});
High performance while still go easy.
Don't like library dependency, take raw source code at https://bitbucket.org/ytkyaw/ydn-db
It looks like these are good ones, though I haven't tried them.
localForage
PouchDB
If you're using the ionic framework which uses AngularJS, I like ngStorage. This one I have tried and it's awesome.
I use localStorage to keep my persistent data, but it is somehow not reliable. I have seen some data lost, but I don't know why. But my persistent data usage is not that critical so I don't mind these inconsistencies.
But your case seems more important. I would store my persistent data in Documents folder, with File API.
Phonegap has local storage support for SQL Lite
http://docs.phonegap.com/en/2.2.0/cordova_storage_storage.md.html#Storage
Sorry I don't have more info. I was interested in this topic and happened to come across it.

Sencha sqlite example

I would like to see a decent example of a mobile web app using the Sencha framework with a client side DB accessed with SQLite. I'm currently digesting JqTouch and kinda get the binding method used there from reading Jonathon Stark's "iPhone apps" book, but cant find any examples of accessing Senchas features ie listed elements with SQLite. The DB will be small; 30 records, with about 5 fields, mostly numeric, a few of them calculated. All the math is done in javascript and I have that part working (in dash code). I need to add, delete, and edit the records.
Any pointers or examples would be very much appreciated. I'm an old dog trying to learn new tricks. Thanks
Sencha is client-side Javascript, so your application actually runs on top of Safari. That means you can forget about accessing (or installing) your own SQLite database from within the browser sandbox.
Having said that, you want to learn some new tricks, so why dont you read up on localStorage and DOM Storage. Basically the HTML5 specification allows for offline database storage based on SQLite (imagine relational database cookies). There is 1 per domain and they can be up to 5MB in size. I believe the iPhone supports this as well.
Here are some links: Introduction some API Information and a nice little blog entry by a chap called Ben Lister
Your client side code (i.e. Sencha/Javascript) would not access the SQLLite database. It will either need to read JSON or XML from the server. You'll need server side code to read the data from the database and format it in a way that your Sencha data readers will understand.
What are you using server side? If it's PHP you should look into MDB2
I had very good experience integrating Lawnchair library with Sencha Touch. Take a look at their guide, it's very easy.
Looks like there is a SQLite proxy available for sencha 2 now. http://market.sencha.com/addon/sqliteproxy-
Check out this thread on the Sencha Forums - it's a user created proxy for SQLite which I've successfully used to put data into a SQLite DB. The proxy comes with an example, but I might try and make a slightly more complicated one at some point.
Sencha's local storage doesn't take advantage of SQLite via the JavaScript API in the browser, but does use local key:value storage and has it's own way of referencing data to make it pseudo relational. This is still part of the WebDB spec, which is probably still SQLite under the hood if I had to guess. It's more persistent than a cookie or session, regardless.
You can also receive XML/JSON from a server over JSONP or Ajax if you're on the same domain, create a model to handle that data as well and bind it to a local store so that your data is available offline.

Categories