9

I want to send a username and password from page login.html to index.html. How can I do that as easy as possible? And how to I encode my strings so they're URL-encoded and UTF-8?

Cheers

5
  • Check out this. Also, there is a lot of information available on this topic. You should get your google on. Commented Jun 25, 2013 at 23:28
  • "Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work." Voting to close. Commented Jun 25, 2013 at 23:34
  • To follow up with @jahroy, this link answers your question a bit more comprehensively Commented Jun 26, 2013 at 0:07
  • @jahroy Why are you guys mark as duplicate ? In the given URL there is no accepted and correct answer. Commented Aug 26, 2015 at 13:13
  • You can find a complete answer here: stackoverflow.com/a/30070207/2247494 Commented Feb 4, 2016 at 18:09

4 Answers 4

19

You can use cookies, window.name, send data by url as querystring, or through web storage.

In this exaple I'm going to save data from one page and read it from another page using the localStorage - (specs), and the following methods:

login.html

function saveData(user, pass) {
   var account = {
     User: user,
     Pass: pass
   };
   //converts to JSON string the Object
   account = JSON.stringify(account);
   //creates a base-64 encoded ASCII string
   account = btoa(account);
   //save the encoded accout to web storage
   localStorage.setItem('_account', account);
}

index.html

function loadData() {
   var account = localStorage.getItem('_account');
   if (!account) return false;
   localStorage.removeItem('_account');
   //decodes a string data encoded using base-64
   account = atob(account);
   //parses to Object the JSON string
   account = JSON.parse(account);
   //do what you need with the Object
   fillFields(account.User, account.Pass);
   return true;
}

Passing the object from one page to another by url as querystring (search)

login.html

function saveData(user, pass) {
   var account = {
     User: user,
     Pass: pass
   };
   account = JSON.stringify(account);
   account = btoa(account);
   location.assign("index.html?a=" + account);
}

index.html

function loadData() {
   var account = location.search;
   if (!account) return false;
   account = account.substr(1);
   //gets the 'a' parameter from querystring
   var a = (/^a=/);
   account = account.split("&").filter(function(item) {
      return a.test(item);
   });
   if (!account.length) return false;
   //gets the first element 'a' matched
   account = account[0].replace("a=", "");
   account = atob(account);
   account = JSON.parse(account);
   //do what you need with the Object
   fillFields(account.User, account.Pass);
   return true;
}

See an extended answer here: https://stackoverflow.com/a/30070207/2247494

Sign up to request clarification or add additional context in comments.

2 Comments

This... var account = localStorage.getItem('_account'); if (!account) return false; ...requires any data to be loaded before localStorage is even checked for it's presence whereas this... if(account in localStorage) { //do something... just checks to see if your data key is present in localStorage. The processing time it gains you is negligible, but it spares you the return statement and (imho) looks cleaner.
Thanks for your advice @MistyDawn, it is true that checking the property in the storage is faster than getting the data associated with the key.
7

Cookies! Yummy for your tummy.


That was fun but here is a real answer. You probably want to store information in a cookie. This is a good way to pass information from one part of your web application to another. It is a common technique so all platforms support it well.

Remember cookies are public so don't put any information that can be hacked. You should hash and or encrypt the value in a cookie. You can also generate random information -- this is best. For example, when a user logs in generate a random number and store that number and the user ID in a table then pass the random number as the cookie. In this way only your DB has the information and you can't hack the cookie (by adding one for example.)

5 Comments

Clearly the best answer based on technical merit ;-) (I am not the downvoter)
@jahroy I've been researching cookies for years!
@Hogan And it shows! Jack - cookies aren't intended to be secure so be careful what you store in them (ie. usernames and passwords)
@nick - I always hash and encrypt the chocolate chips.
@nick: Nothing else is secure either unless you use HTTPS. Only cookies are sent more often over the wire than, say, POST parameters from a form, and therefore are easier to sniff.
3

You can use the jquery-cookie plugin:
https://github.com/carhartl/jquery-cookie

Usage:

<script src="/path/to/jquery.cookie.js"></script>

Create session cookie:

$.cookie('cookieName', 'myValue');

Create expiring cookie, 7 days from then:

$.cookie('cookieName', 'myValue', { expires: 7 });

Read cookie:

$.cookie('cookieName'); // => "myValue"

Delete cookie:

$.removeCookie('cookieName');

1 Comment

I used that plugin, It is good! But you don need cookies, just use the [ localStorage ] to save local data.
1

You can use encodeURI('some text to encode') to the second part of your question

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.