Question for javascript gurus

**galleryseek** · 01-04-2017, 07:06 PM

How are the fields being retrieved from the first page? Just static HTML? Or is it pulling the data from somewhere like through js?

If it's not pulling the data from somewhere or some API, you'd need to scrape the data. There's a lot of different techs you can use to scrape. Python is the most popular.

**Barry-xlovecam** · 01-04-2017, 07:21 PM

AJAX/JSON on both pages to a server side script.
Cross domain will require good scripting.

**Bladewire** · 01-04-2017, 07:26 PM

^^ This man is verified as super brains

**sarettah** · 01-04-2017, 08:16 PM

I am thinking you want to use sessionStorage for that.

https://developer.mozilla.org/en-US/...sessionStorage

The sessionStorage property allows you to access a session Storage object for the current origin. sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work.

It should be noted that data stored in either sessionStorage or localStorage is specific to the protocol of the page.

SyntaxEDIT
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();

.

**sarettah** · 01-04-2017, 08:30 PM

Here is a working example: http://madspiders.com/js_test/page1.htm

On Page 1 enter something in the text box and then hit the link to page 2. On page 2, whatever you entered on page 1 will be displayed.

Code for Page 1:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function storeit(stored_data)
  {
    sessionStorage.setItem('stored_data', stored_data);
  }    
  
  </script>
  </head>
  <body>
    Enter something here:  <input type=text value='' width=20 maxlength=50 onChange="storeit(this.value)";><br>
    <a href=page2.htm>Go to Page 2</a>
  </body>
</html>

Code for page 2:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function get_data()
  {
    var stored_data = sessionStorage.getItem('stored_data');
    if(stored_data>'')
    {
      result_div.innerHTML='data stored was: ' + stored_data + '<br>';
    }
    else
    {
      result_div.innerHTML='no data was found<br>';
    }
  }    
  
  </script>

  </head>
  <body>
  <div name=result_div id=result_div>
  </div>
  </body>
  <script type=text/javascript>
    get_data();
  </script>  
</html>

.

**rowan** · 01-04-2017, 08:35 PM

Not sure about sessionStorage, but I'm pretty sure that most browsers will prompt the user for confirmation (ie, a dialog saying "this site wants to...") when the code uses localStorage. Test carefully to make sure you don't spook your visitors.

Edit: Also this text seems to suggest you can't share data between windows, because they will be considered separate sessions. "Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work."

**Bladewire** · 01-04-2017, 08:35 PM

Originally posted by sarettah

Here is a working example: http://madspiders.com/js_test/page1.htm

On Page 1 enter something in the text box and then hit the link to page 2. On page 2, whatever you entered on page 1 will be displayed.

Code for Page 1:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function storeit(stored_data)
  {
    sessionStorage.setItem('stored_data', stored_data);
  }    
  
  </script>
  </head>
  <body>
    Enter something here:  <input type=text value='' width=20 maxlength=50 onChange="storeit(this.value)";><br>
    <a href=page2.htm>Go to Page 2</a>
  </body>
</html>

Code for page 2:

Code:

<html>
  <head>
  <title></title>
  <script type=text/javascript>

  function get_data()
  {
    var stored_data = sessionStorage.getItem('stored_data');
    if(stored_data>'')
    {
      result_div.innerHTML='data stored was: ' + stored_data + '<br>';
    }
    else
    {
      result_div.innerHTML='no data was found<br>';
    }
  }    
  
  </script>

  </head>
  <body>
  <div name=result_div id=result_div>
  </div>
  </body>
  <script type=text/javascript>
    get_data();
  </script>  
</html>

.

^^ Verified super brains much respect ^^

**Miguel T** · 01-04-2017, 08:44 PM

I'd use AJAX for that.

**sarettah** · 01-04-2017, 08:47 PM

Originally posted by rowan

Not sure about sessionStorage, but I'm pretty sure that most browsers will prompt the user for confirmation (ie, a dialog saying "this site wants to...") when the code uses localStorage. Test carefully to make sure you don't spook your visitors.

Edit: Also this text seems to suggest you can't share data between windows, because they will be considered separate sessions. "Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work."

I just tested in Chrome, FF and IE and it worked in all without throwing up any dialog.

I also just added a second link on page1 to open page 2 in a new window and the data passes between them just fine. Tested that in Chrome and FF.

So this is the simple, easy way to accomplish the task as far as I can tell.

I like simple solutions as I am a simple minded person.

.

**2MuchMark** · 01-04-2017, 09:14 PM

Hi Everyone,

Let me clarify a little.

Both pages are HTML.

My main, fancy html5/css3 sexy page, index.html, would say "Hey! Here's the data! 1&2, 3&4, 5&6. "

The page that actually contains the data would be unformatted nothingness, called "data.html", and would just contain

"1&2", "3&4", "5&6".

Both pages are HTML, and both are on the same domain.

**rowan** · 01-04-2017, 09:16 PM

So you're saying you want the main HTML page to fetch another page/object which contains raw data... that's an AJAX callback.

**sarettah** · 01-04-2017, 09:29 PM

Originally posted by 2MuchMark

Hi Everyone,

Let me clarify a little.

Both pages are HTML.

My main, fancy html5/css3 sexy page, index.html, would say "Hey! Here's the data! 1&2, 3&4, 5&6. "

The page that actually contains the data would be unformatted nothingness, called "data.html", and would just contain

"1&2", "3&4", "5&6".

Both pages are HTML, and both are on the same domain.

I have no idea why you would want to do that But if you are not actually displaying the data page then that is actually a server side call and does not need any javascript but it could be done with ajax as Rowan and Barry have said. But in that case the data page does not have to actually exist as an html page. It can be a data file, it could be a mysql call or any of the other bazillion ways that you could store data on the server.

Where is the data page coming from. If it is displayed in the browser then is it displayed before the fancy page is displayed? In which case, why?

Anyway, here is how you could do that using Ajax (JQuery version):

Ajax version at: http://madspiders.com/js_test/ajax_page1.htm

Code:

<html>
  <head>
  <title></title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
  <div name=result_div id=result_div></div>
  </body>
  <script>
      $.ajax({url: "data.htm", success: function(result)
        {
           $("#result_div").html("The data is: " + result);
        }
      });
  </script>

</html>

Data.htm looks like:

Code:

1&2, 
3&4, 
5&6

.

**deonbell** · 01-04-2017, 10:52 PM

Just like to add. If "data.html" is made up of user supplied data, make sure you filter the data so that you only get data.

To avoid problems like persistent XSS, LFI (local file inclusion), and RCE (remote code execution).

**Barry-xlovecam** · 01-05-2017, 03:59 AM

For cross domain I just found this
enable cross-origin resource sharing
https://manning-content.s3.amazonaws.../CORS_ch01.pdf

This is interesting.
It's OK for free content because your API Key is in plaintext in the .js file -- Facebook and the like ... You could also watermark your public images and make them available for wide distribution.

**sarettah** · 01-05-2017, 02:18 PM

Bump to see if this took care of Mark or not.

.

Question for javascript gurus

Question for javascript gurus

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment