How to send variables from one file to another in Javascript?

Question

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

Answer 1

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:

• JSON.stringify()
• JSON.parse()
• WindowBase64.btoa()
• WindowBase64.atob()

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)

• Location

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

Answer 2

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.)

Answer 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');

Answer 4

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