How can I create a client-side database that persist between sessions? - javascript

I'm working with HTML5 to create a client-side database using the Lawnchair Javascript library, but when y create a new Lawnchair object what i get is a new local storage, not a new database
var people = new Lawnchair('people');
the problem is that in local storage I have just one table, and i need to be able to create more than just one table.

You can ref to this page for local database usage.But not all browser support it yet.
http://blog.darkcrimson.com/2010/05/local-databases/

You might want to use Web SQL Database, but that's implemented only by Chrome, Safari, and Opera. If that is not a problem look here: http://www.html5rocks.com/tutorials/offline/storage/
By the way what do you mean with
in local storage I have just one table
?
You could use the local storage to hold different values, like so:
localStorage['foo'] = "foo";
localStorage['bar'] = "bar";
localStorage['baz'] = "baz";
Values are strings, so you can also save say json or something else if you like.

Related

How to save a js file with the variable values set?

I'm a beginner so I lack the proper vocabulary to clearly express what I want to try - or search for it so the right answers come up. But I'll try to explain:
I have a simple javascript application that has a bunch of variables that are filled with values from a database via jQuery ajax depending on initial user choices. Now, once the application is properly loaded with all the values retrieved from the db, I want to save it in this state for offline use.
The application would work fine without internet access if I hardcoded all the variable values, but as they depend on user choices upon start, this is not really an option. So I thought, maybe I could just save the loaded state as a js file. Is there any technology like that?
My fallback solution would be to do the hard work in php once the user clicks "download for offline use". Like keeping a copy of the js file as a string with placeholders for variable values and then replace them with the values from the database after the user made his initial choices. But to be honest, I feel like there must be a more elegant solution.
In browser Javascript, you cannot save files for security reasons. There is, however, an API called localStorage which allows you to store persistent information in the browser. You can put all your variables in an Object, stringify it to JSON, then save it in localStorage, then retrieve them by parsing the JSON:
// saving variables
var myVariables = {a: 1, b: "foo", c: [4, 5, 6]};
localStorage.setItem("vars", JSON.stringify(myVariables));
// retrieving variables
var retrievedVariables = JSON.parse(localStorage.getItem("vars"));
console.log(retrievedVariables.b); // "foo"

Write json to local disk javascript

I wrote a small application(proof of concept) in angular.js and i encountered the need of persisting simple data between application instantiations.
I would like to know if there's a way of storing JSON objects to a local file, on my computer, without server or database intervention.
The easiest solution I found is using ColdFusion, but this requires setting up a server too.
Thanks!
You can use HTML5 Local Storage.
you can store Json object like this:
var jsonObejct = {'city':'New Yourk', 'country':'USA'}
localStorage.setItem('jsonObejct',JSON.stringify(jsonObejct));
you can retrieve from Storage Like:
var loadedObj = localStorage.getItem('jsonObejct');

Store data locally using HTML and JavaScript

I have a small LAN with some computers.
I'm looking for a way to build a dynamic HTML webpage that uses JavaScript to store some data locally (can't use server side - only client side).
The webpage will be stored on a network drive shared with all the computers.
I wish to do that using a file, maybe an XML file or something similar that will be loaded using JavaScript and then saved again after some changes.
The data must be shared with all the computers on the LAN.
How can I do this?
HTML5 localStorage
//Set
localStorage.setItem("lastname", "Smith");
//Get
var lastName = localStorage.getItem("lastname");
You have the following options :
1.LocalStorage : You can store data in variables. There would be a limit as to how much data you can store.
Refer : http://en.wikipedia.org/wiki/Web_storage.
Eg:
// Store
localStorage.setItem("sample", "test");
// Retrieve
var sample = localStorage.getItem("sample");
2.WebSQL : This should be the most easy way of storing in client side. WebSQL is supported in almost all current browsers(HTML5). However there is no longer official support for WebSQL as its depreciated and no future updates.
Refer : http://en.wikipedia.org/wiki/Web_SQL_Database
3.IndexedDB : This is also another way to store data in local database. However this is not yet supported in all browsers.
4.XML
If you are going forward with storing data in local DB, then you can utilize PersistenceJS.
Refer : https://github.com/zefhemel/persistencejs
Try like this:
store a value :
localStorage.setItem("lastname", "amir");
get a value:
localStorage.getItem("lastname");
You can use HTML 5 LocalStorage
Depending on the flavor of data you're storing, simple cookies might work, accessed with plain old JS.
finally I found a solution for it!
I am using a jQuery plugin called: twFile (http://jquery.tiddlywiki.org/twFile.html).
It uses an activeX FileSystemObject - it works great on IE9.

Architecture for temporary storing of values within a javascript library

I am currently writing a javascript library that wraps a REST API provided by a third party (intended to be used on server side, but wouldn't like to limit it to). One of the actions defined by the api is 'login' which gives me a session key that I need to use on further requests. Currently, everytime I go to use this library I need to login again as there is no persistence of this session key. My question is, what is the best way to persist it throughout a session?
My first instinct was to give the library a callback that would store it and a callback that would retrieve it and the implementation can determine how that session key is persisted:
var thirdPartyApi = new ThirdPartyApi({
loginCredentials: {..},
setSessionKeyCallback: function() {},
getSessionKeyCallback: function() {}
});
thirdPartyApi.makeSomeRequest('foo');
Can you recommend the best architecture for this problem?
It seems like you want to use the REST Api in a browser. There are some factors you need to take into account, such as, navigating away from the page and coming back to it later.
You can use Web Storage to store the key. There are two types, localStorage and sessionStorage. The only difference between then is that sessionStorage is deleted when the browser window is closed, while localStorage isn't. Web Storage is supported by all modern browsers and IE8+ http://www.w3schools.com/html/html5_webstorage.asp
The localStorage object can be used as such:
localStorage.setItem("bar", foo);
var foo = localStorage.getItem("bar");
localStorage.removeItem("bar");
sessionStorage object can be used the same way.
both localStorage and sessionStorage are global objects that can be accessed from anywhere, so there is no need for any special architecture on your ThirdPartyApi object.

Local storage for a browser plugin that isnt dependant on the URL

So im writing a browser plugin that needs to store data locally.
I'm using the jQuery jStorage plugin so my code looks something like this:
var value = ($.jStorage.get("test")) + 1 ;
$.jStorage.set("test", value);
console.log($.jStorage.get("test"));
Problem is that it stores the value specifically to the website you're on. So if the plugin activates on example1.com, the value could be 10;
then if it activates on example2.com the value could be totally different;
I need to store data locally that will remain the same on all pages.
Either by storing it in the browser plugins storage or something(not so ideal as that means for each browser i'd have to figure it out again i assume.)
But any help or direction would be AWESOME!
You can use local storage feature of jquery. Refer following example
Assign value to variable
localStorage["sample"] = 1;
Get value from local storage
var mySample = localStorage["sample"];
Jquery will store local variable in browser so you will get even after refreshing page.
Hope it helps.

Categories

Resources