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.
Related
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'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.
I would like to use session storage to query user data in the database only once and then simply use JS to retrieve it, so I'm thinking about using session storage. My question is next, is that safe?
Please note:
1. JS can't be inserted to pages with forms (forms only accept alphanumeric values) so it can only come from URL
1.1 Query strings like www.website.com/?q=blablabla are not used in php (php doesn't retrieve any data from url)
1.2 Calling js in url with javascript:script... isn't a big concern since the user can only asccess his own data, not to mention that he can already access it - that's the point of user data
1.3 Is there a third way of a user being redirected to the site via a link that contains JS that will than be able to access session storage? i.e.: somthing like - www.website.com/script...
My guess is that only something like 1.3 would be a threat (in addition to that, am I missing something?) but does that even exist? And if so is there a way to prevent it?
Thanks for your time and replys.
You're essentially relying on two things for session storage security:
The browser limiting access only to the javascript on the page from this domain
javascript that is running on the page to be secure
Now there's not a whole lot you can do about No. 1 because that's the vendor's issue and, not pointing at anyone in particular but, most of them are usually pretty good at this kind of thing.
So you can be fairly sure no other code on any other tab, domain, browser or process is going to be able to see your storage object.
However, No. 2 is more difficult, You'll have to evaluate by yourself how secure your page is to script attacks, there's plenty of documentation out there on best practices but you could go on for days. You really need to judge how sensitive the data is versus how much work and possible loss of features it would be to secure against it.
If it's really sensitive data I'd question why you'd risk storing it client side at all and have access only through HTTPS. But you're site should be secured for most scripting attacks because if 3rd party javascript is running session cookies are up for grabs and therefore your server security is compromised too.
Since the session storage can only be read by JavaScript that is running on your page, I think your question boils down to "How can JavaScript be excuted/inserted into my page?" There are two attack methods: XSS, meaning some way to inject JavaScript into your page through posting data to your site. If this data is not filtered, it may insert script tags or JavaScript events into your HTML. There are many ways to do this and to protect against it, so I can't be more specific.
A lesser threat would be to trick the site into displaying or changing information through specially crafted links that call specific actions on your page. This technique is called CSRF. Example: Someone crafts a link to the "change email" page and tricks a user who is logged into clicking this link, this changing the email info in the session storage.
If your application is public, anyone can open the session storage in his browser and look up the names of the keys. So unless they are randomized obscurity offers no protection here.
How can I store data on the clients side securely (not viewable/visible) in javascript.
In particular, I want to grab an array from the database with PHP and then use that array for autosuggestion data. Currently I am setting the array as a JS variable, however it can be seen in the html page source code.
I have looked at autosuggestions online and came across: http://www.brandspankingnew.net/specials/ajax_autosuggest/ajax_autosuggest_autocomplete.html
I cannot find where the autosuggestion data is being stored, which is what I want for my script. Help!
No, what you are trying to do is impossible. Javascript is being run by the client and thus the client has absolute control over the data. If you are trying to store a secret in javascript then an attacker can use a debugger to see it in memory. But this is the worst case. Its easier a lot easier to manipulate the traffic with TamperData, or manipulate the javascript directly with Greasemonkey.
If it is sensitive data like usernames or passwords, you shouldn't auto suggest anything. If it is not sensitive data, the AJAX solution from your link is the obvious way to go, but you could easily store it in a cookie if it is not more than 4kb, or in various cookies otherwise.
I'm working on a web based form builder that uses a mix of Jquery and PHP server side interaction. While the user is building the form I'm trying to determine the best method to store each of one of the form items before all the data is sent to the server. I've looked at the following methods
Javascript arrays
XML document
Send each form item to the server side to be stored in a session
The good, the bad and the ugly
Depends on your application functionality and requirements, but Javascript would probably be the best way. You can use either arrays or objects or whatever in javascript. It's server independent and it will preserve data over a long period of time as long as client session stays present (browser window doesn't close for whatever reason) but this can be quite easily avoided (check my last paragraph).
Using XML documents would be the worst solution because XML is not as well supported on the client side as you might think.
Server side sessions are good and bad. They are fine if you store intermediate results from time to time, so if client session ends because of whatever reason, user doesn't loose all data. But the problem is that it may as well expire on the server.
If I was you, I'd use Javascript storage and if needed occasionally send JSON serialized results to server and persist them there as well (based on business process storig this data somewhere else than session could be a better solution). I'd do the second part (with sever side combination) only if I would know that user will most probably build forms in multiple stages over a longer period of time and multiple client sessions. but can be used for failure preventions as well. Anyway. Javascript is your best bet with possible server-side interaction.
Preserving data between pages on the client
Be aware that it's also possible to preseve data between pages on the client side. Check sessvars library for this. So even if the page gets refreshed or redirected and then returned all this can be stored on the client side between these events like magic. Marvelous any rather tiny library that made my life several times. And lessened application complexity considerably that would otherwise have to be implemented with something more complex.
I used TaffyDB to store data, and it's just wonderfully easy to implement.
Hope this helps you
You may want to check out PersistJS, which exposes a cross-browser persistent storage object. Of course, being persistent, data stored with this library survives sessions, not just page changes.
The latest version (0.2.0) is here – note the version in the above linked post is 0.1.0.
A combination of #1 (although I'd use objects, not arrays necessarily) and #3 would seem like a good approach. Storing the data locally in the browser (#1) makes it immediately accessible. Backing that up with session-based server-side storage defends you from the page being refreshed; you can magically restore the page just as it was.