I'm developing a PhoneGap application. If you don't know what that is, it's a service that allows you to build mobile-based applications using HTML, CSS and JavaScript.
I have an application, and I've come to a point where I need to transfer information from one page to another. The user chooses an option on the page, the application then loads a new page and based on their option it loads specific content.
Now I do already know a few ways of doing this, to name one.. local storage maybe. My question is, what is the most efficient way of getting information between these two pages? If this were PHP I'd simply using $_GET[''].. but it's not PHP, I'm looking for the best way to do this using HTML, CSS, and JavaScript.
Any help here would be highly appreciated!
There are several possibilities:
You are using a service like Phonegap:build or Cordova: You only gonna have one HTML-File where you continously hide and show the different pages. I don't recommend this one, but Phonegap:build and Cordova are great to create a package for all major phones, without headache.
URL-Parameters you could pass parameter over the URL to a different HTML-Page. This means you have to open all links with window.location.replace() or change the href-attribute on you anchors. In the next page you have to parse that URL, which is not as easy as in PHP.
localStorage / sessionStorage you can easily store data in the sessionStorage. With sessionStorage.myObject = JSON.stringify(complexObject) you can easily store complex objects to the session storage and read them back with var complexObject = JSON.parse(sessionStorage.myObject). Those are available during you complete session and would be one of the easiest solutions so far.
Related
so I have seen a lot of people using local storage to store certain parts of a web page but not an entire web page is it possible? , if so how? , if not is there a way to store an entire web pages data so the user can come back to it how they left it?
This can be done if you use javascript to save document.body.innerHTML into the webstorage and you use javascript to load it back from the storage when the page is loaded next time. If the web page is not in the webstorage, you could redirect the user to the web page.
But this depends on the design of your web page and if there is session index etc in the body of the web page.
You should also think of some way to handle versions. You dont want your users only use the cached version of your web page, but it should be updated once you update your web page.
The session storage is ~5mbit, so you cant save very much, especially not pictures.
Since LocalStorage allows you to store about 5MB~ you can store a full webpage there and then just call it into a document.write().
The following code does it:
Storing it:
var HTML = ""; //html of the page goes here
localStorage.setItem("content", HTML);
Retrieving it:
document.write(localStorage['content']);
Although this is possible it is common practice you only save settings and load them up into the right elements rather than the entire web page.
This is not really answering your question, but, if you are only curious how this can be done and don't need to have wide browser support, I suggest you look into Service Workers, as making websites offline is something that they solve very well.
One of their many capabilities is that they can act as a proxy for any request your website makes, and respond with locally saved data, instead of going to the server.
This allows you to write your application code exactly the same way as you would normally, with the exception of initializing the ServiceWorker (this is done only once)
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
https://jakearchibald.github.io/isserviceworkerready/
Local storage it's actually just an endpoint: has an IP address and can be accessed from the web.
First of all, you need to make sure that you're DNS service points on your Index page.
For example, if your Local-storage's ip is 10.10.10.10 and the files on that local-storage is organized like:
contants:
pages:
index.html
page2.html
images:
welcome.png
So you can point your DNS like:
10.10.10.10/index -> /contants/pages/index.html
In most of the web frameworks (web framework it's a library that provide built in tools that enable you to build your web site with more functionality and more easily) their is a built in module called 'route' that provide more functionality like this.
In that way, from you index.html file you can import the entire web site, for example:
and in your routes you define for example:
For all the files with the .html extension, route to -> 10.10.10.10/contants/pages/
For all the files with the .png/.jpg extension, route to -> 10.10.10.10/contants/images/
Local storage is usually for storing key and value pairs, storing a whole page will be a ridiculous idea. Try instead a Ajax call which Returns an partial view. Use that for the purpose of manipulation in DOM
Looking for some advice for having multiple tabs open in a single browser but only one communicates with the server.
Best practices, frameworks etc.
figured there might be a framework that already handles this idea through local storage or cookies but couldn't seem google one or find a previous post that addresses this problem.
At this point i'm looking to role my own via by keeping a list of tabs and assigning one to make calls to the server and share the data via local storage.
update.
found this Duel.js will investigate.
Alright after some playing around with DuelJS it appears to be what I was looking for in terms of a existing API.
Managed to get it working in within a Angular 2 typescript project and I'm pretty happy with the result.
Basically I have single web page open in two tabs one being a master tab that is making all the calls to the server/database and broadcasting the result the slave tab where the component/view is updated.
Still interested in other peoples thoughts?
I'm new to web development and I'm trying to make small projects to better understand how javascript works and how interactive websites are made. So I wanted to make a simple website that would save links that you would enter using input/form submission. but what are the ways which I can use to store it on the server so when I open the page next time the website retrieves the saved information and displays it?
I know this question is pretty open, but I'm really lost in this part of web development because I'm seeing too many completely different things on the internet like PHP, ASP.net and what not. Can someone help me out?
It would be very thankful if someone can send me a link to a related tutorial or some similar resource, as well.
If you to do that, you will need a server side program with a Database.
Here is a tutorial for PHP, a popular language to do web pages http://www.w3schools.com/php/
When you submit your data in the form, That data will be sent to the file mentioned in the action attribute of the form. Now, each input element of your form will have a name attribute which you can use to refer as a key in your GET or POST super global array depending on the method attribute of your form tag.
I know it may sound confusing without example. But, This is explained at many links on the web. Try searching for form submission with post.
Decide on which technologies that you want to work with. I prefer you to use ajax with instead of just using javascript.
Link for flask tutorial http://www.fullstackpython.com/flask.html
Store the data in the client side is much simple I think. While storage in client, you can use localStorage sessionStorage and cookie.
localStorage you can storage whatever you want and it has no expiration time
sessionStorage the difference between localStorage is that it has a expiration time, A page session lasts for as long as the browser is open and survives over page reloads and restores
Cookie is much simple and can store limited value in string format
I've seen several other questions on SO that are similar to this, but none of them are really what I'm looking for, so hopefully this won't be seen as a duplicate.
I have a client-side Javascript/HTML5 web application built with jQuery Mobile. I am finding that performance can be quite slow and it was suggested that having too much going on in the DOM could be the cause. My app does have several data-role="page" divs that could be bulking up the DOM in a single html page. I'm trying to split my app into several html pages to improve performance, but I want the experience to be seamless for the user. This means I will need to pass Javascript variables between the physical html pages within my app.
So far I've seen the following options in my searching:
Use a query string in the url going to the other pages. - I'm not sure I want my users seeing a what could be a rather large and confusing query string in the address bar.
Use server side code like ASP.Net or PHP to handle postback data. - I'm open to this, but I'm not really sure how it would work. I don't want to convert my html pages to aspx or php files. Could I have a simple server side script that could embed the postback data into a regular html file?
Use Cookies to store relevant data. - I'm not to sure of this one either because the majority of my users are in enterprise environments that may limit cookie usage.
Are there any other methods for accomplishing this? At this point, I'm leaning toward some sort of server side processing. If that is the best method, could someone point me in the right direction for figuring out how to do that?
Try out Local Storage or Session Storage http://www.w3schools.com/html/html5_webstorage.asp
Local Storage would be a way to go if you are HTML5 compliant. It will store values, reduce the calls to any server until you are actually ready to update all the info and the info will be present even when the browser is closed; use session storage or JS like this
window.onbeforeunload = function() {
localStorage.removeItem(key);
return '';
};
if you need to clear local storage of sensitive info on closing the browser.
Remember that anything you pass into local storage will come out as a string so you will need to convert it to the appropriate data type when you get the info out of storage.
You'll also be limited to storing 5 megs of data (I believe that is standard) but you probably have other issues if your form requires that much info. :)
Check these out for more info
http://msdn.microsoft.com/en-us/library/bg142799(v=vs.85).aspx
http://dev.w3.org/html5/webstorage/
You could use a POST instead of GET if you're only concern with the GET is the user seeing lengthy querystrings.
Use localStorage. localStorage lets you store values in the browser.
I am constructing a standalone application that is comprised of HTML, CSS and JS files. The data that is being used by the application is being loaded from an XML file.
I, however, require the application to use a local database - something that would allow me to load, create and edit the data in this database using Javascript. Then package up the application and send it on (I am using webapp-xul-wrapper for this).
Could anybody give me some advice on how I could achieve this? The majority of solutions I have looked at use local storage or only keep the db table data for that particular session or require server side code.
To clarify, my application has a settings page that I would like to allow to edit my data and then keep that data persistent so that when the application is opened again the data is intact. Furthermore, if I was to send the application to someone else - that data would also be intact. Ideally my app would take its data from a physical file that could be passed around.
I hope this question makes sense!
Many thanks,
G.
I actually ended up using a packager called TideSDK (http://www.tidesdk.org/) which supports SQLLite out of the box and also seems to render my applications layout much clearer.
Many thanks!