We Keep Coding

How to pass values from one web page to another

I am new to web development and there is something I'm very use to doing in mobile dev and I wanted to know if it is applicable to web development(Html, CSS & Javascript).
It is basically code reuseability, but in this case I want to pass the data(String) I get from a database to another web page where I act on those data.
I would like to implement It with a single web page whose job is to load the data e.g a web page that shows user profile or a web page that show chat history of 2 users.
I really hope you understood what I was trying to say, I honestly suck at type explaining.
Thanks guys.
A code example of what I'm trying to implement.
example language Flutter(dart).
...
final string userId;
const ShowUserProfile(this.userId);
....
Text('Welcome ${widget.userId} to your profile screen', style: ....);
....

If you want to pass data from one page to another using only HTML, and JS (client-side) code and not use any server-side code you can accomplish this in two ways:
1) Store data in the URL. Example:
HTML
some link
JS
const data = 'abc';
const link = document.getElementByID('mylink');
link.href += '?data='+ data;
this method is detailed in another question here How to store data as a url parameter using javascript?
2) The preferred method is to store the data as a cookie in the user's browser because this method does not pass the data over the network. Example:
JS
document.cookie = "data=abc";

Two methods, one is the data can be part of the http link such as https://yourwebsite/iampage/thisisthevalue. But this method is so messy and your users will see the value and also spaces are replaced with %20....
Method 2 is using localStorage or session or indexedDB. Easiest is localStorage. More information on localStorage can be found in this link https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.

You can also make a separate css document with all the code and then go like this:
<source src="name.css" type="text/css">
Then you can get the same CSS document on 2 diffrent pages

Save controller state on page refresh

I'm trying to implement a gmail like save message as draft functionality in my form.
Use Case: There is one form with certain fields which includes some text box, some image uploads, etc. My problem is how can I retain the values of these if these have been filled by user on a page refresh. Remember page is not yet submitted by user. If it has been submitted then I could have retrieved the values from server but how can I store values in input box now in case no submit button is clicked.
Should there be some api which will save the values regularly or can there be some api which can be invoked only when user is about to close the page or refresh it ?
I have no idea about this and would appreciate any pointers in this.
Update:
Based on the suggestions, I tried to explore some tutorials/blogs which can show the preoper design and implementation for using local storage. I found following good links:
http://yeoman.io/codelab/local-storage.html
https://domantasjovaisas.wordpress.com/2014/09/05/angularjs-saving-global-variable-in-localstorage/
Few doubts:
It seems we can store a JSON object in local storage but how can I store a given object for a given user.
Use Case: A user can create multiple messages. I just want to keep the last message which was not saved neither sent. How can I design this so that storage works fine ? For a given userId I want to keep some data in local storage. Is it safe to store a db Id in local storage ?
Please suggest

I suggest using a library that abstracts over localStorage and defers to cookies if you are looking to support older browsers. Use JSON.stringify and pass it to your storage service. You can also append usernames to the key if you are likely to have multiple users on one machine. It would be good practice anyways.
Examples include:
https://github.com/grevory/angular-local-storage
http://ngmodules.org/modules/ngStorage
You can hook into ng-change, watches, event listeners or use a timer as someone else suggested.
UPDATE: You can find a trivial implementation here, http://scionsoftware.com/Blog/saving-form-state-with-angular-js/
If you're looking to do it for only one string value as you implied, simply remove the JSON.parse and JSON.stringify pieces from the javascript.

Saving Links to another page

I am developing a mobile website. It is HTML website.
I have design one blog page and add 100 posts. I have one page named "favourites.html".
I have added a image with each post into the blog page. I want to do, when user may click on image the link should be save to my favourite.html page as list..
I want to add these link as list with remove button.. so user can remove the links...
here is a sample image for more clarification.
http://i.stack.imgur.com/8oZaY.jpg

I would create a database table therefore with userIDs and the url of the favored blog post.
Then you just have to select the userID from table favorites and print it on screen.

you can use cookies. You can also use localStorage. But for blog website you need server side.
If you choose to use jquery for cookies, you need to do something like this
$.cookie("fav","YourValue");
You can download Jquery cookie plugin fro here https://github.com/carhartl/jquery-cookie
If you want it using localStorage then it will be like this
localStorage.setItem("fav", "YourValue");
And to read you need to do something like this
localStorage.getItem("fav");
But for a blog website, you got to have backend development

You can use HTML5 web storage to store favorites links. This will be temporary will be available until user clears cache.
If you want permanent solution you need to move it to backend.
var favs = [{favsurl:"someurl"},{favsurl:"someurl"},{favsurl:"someurl"}]
var favList = JSON.stringify(favs);
// Store
localStorage.setItem("favorites", favList);

How do I get user specific pages using javascript only?

I am creating a website where each user will have their uniq page. users can visit other user's pages by
http://website/user?user=<username>&session=<session>
Now I want to simplify above URL to
http://website/user/<username> (something like pinterest or facebook)
I thought I can use mod_rewrite. However, mod_rewrite is for server side. I do not want to include any PHP code. What I do to get data for a user :
load the basic HTML template and then based on which user we are talking about, load user's data asynchronously.
Can I achieve above in JS? If yes, how?
-Ajay

Unfortunately, you can't do exactly this.
But possible solution would be to place your HTML hub page to http://website/user/ and form user URLs like this: http://website/user/#username. JS can get the user name simply by var username = location.href.split("#")[1].
By the way, you said that you are not using PHP. How do you parse URL arguments then?

Best way to store temp data to pass from web application to desktop application using javascript

I'm looking for the best practice here.
I need to store 10 variables of information, in a certain format:
lname: [John]
fname: [Doe]
etc...
using Javascript. I was thinking about using cookies.
My scenario is as follows:
The user would be in Salesforce.com and they would enter the customer's information into a record. They would then click a button get a quote. The button, using JS, would write the Salesforce fields to a temp file (cookie maybe). From there the other MS application would pick up that file and read in the values.
How would you guys do that?
Thanks for the time.

The browser will not allow you to write files, generally speaking. For this, you'd have to use a mechanism to get out of the security sandbox, such as a signed Java applet.

Cookies are NOT a good option here. Desktop apps should not be attempting to access browser cookies; at best, it's considered "badly behaved code"; at worst, you won't be able to do it, or your app will get detected as malware. Even if it was considered OK, you'll have to write cookie-reading implementations for any browser you want to support since there is no standard for how they are locally stored.
Why not make the desktop app access the web on behalf of the user? Write SFDC quote requests to a new SFDC custom object, like Quote_Request__c or similar, and the app can query the most recent record(s) created by the user via the API.
Clipboard integration, while it sometimes seems clunky, may be a low-cost option.
If you must write to a local file of some sort, you'll need to use Flash or Java, or make the user locally save some downloaded file (like any normal browser download).
Another option would be to register your desktop app as a URL protocol handler; so, say, myquote://firstname/lastname/product/price/etc could be clicked from a web browser to launch the app and parse the "URL". May work poorly with very long/complicated data though.

Yes, cookies are certainly an option in this case. Cookies are accessible via the document global object (e.g. document.cookie). It can hold a string and an expiration date.
Here is a cookie handler I wrote:
http://jsfiddle.net/zbaJz/1/
Using this handler, you can store information in a cookie, and would be able to view as well as delete it. Then, using JSON stringify, you can pass it an object.
var name = {
'fname': 'John',
'lname': 'Doe'
};
var jsonText = JSON.stringify(name);
var cookieMonster = new Ovenmitts();
cookieMonster.bakeCookie('name', jsonText);
Then, in order to turn the data back into an object to manipulate, you would use JSON.parse.
var cookieInfo = cookieMonster.admireCookie('name');
var revived = JSON.parse(cookieInfo);

You can add a thread/task to the MS Application that watches for changes in the directory whee the cookie is created. When you detect a new file that meets your requirements you can act on it. You will need to use DirectoryInfo for this approach.
You can also create and windows or webservice that the application listen to and can pass the data this way from the web app.