0

This has been giving me a lot of trouble and so far every stackoverflow question/answer I've found and every other bit of googling hasn't helped me all that much.

I have two HTML files. One is called cs, and the other is called csi. They both are linked to a common js file where I'm trying to implement the variable that will persist across both of them.

The variable is defined in the cs html by user input, and is then brought up in csi.

Here's what the Javascript looks like. I have it to run onlyCS on the cs html on body load, and onlyCSI on the csi html on body load.

The colors persist, and the variable MyApp.str is established in cs, but when it loads to csi, MyApp.str becomes "undefined"

I figured I would've avoided this because I established MyApp.str = strChar, which is itself established as a bit of user input that's only available in cs.

var MyApp = {}; // Globally scoped object

function onlyCS(){
    MyApp.color = 'green';
    setInterval(strdefine, 3000)
}

function onlyCSI(){
    MyApp.color = 'red';
    setInterval(bar, 3000)
}

function strdefine(){
    alert(MyApp.color); // Alerts 'green'
    strChar = parseInt($('#Xdemo').text(), 10);
    $('#result').text(strChar);
    MyApp.str = strChar;
    alert('the myapp global obj (str) is currently ' + MyApp.str);
}

function bar(){
    alert(MyApp.color); // Should alert 'red'
    alert('the myapp global obj (str) is currently ' + MyApp.str);
}

If anyone could help me out, I'd really appreciate it.

EDIT: The comments help me figure out that using localstorage and variables is a good solution for my problem.

within strdefine I put

strChar = parseInt($('#Xdemo').text(), 10);
localStorage.setItem('str', strChar);

and within bar I put

alert('LS "str" is currently ' + localStorage.str);
var ex = localStorage.getItem('str') || 0;
$('#result').text(ex);
5
  • 2
    The browser resets everything once you load a new page. You'll need to persist it through localStorage or sessionStorage. Commented Nov 22, 2015 at 15:44
  • That may be the problem I was having. So without local storage, all defined items will revert, regardless of where or how they are defined? Commented Nov 22, 2015 at 15:48
  • How these two HTML files are connected each other? You can pass some data through the query string in URLs of HTML files you're working with. Commented Nov 22, 2015 at 16:04
  • @stm Within the cs html, there is a button that when clicked, loads the csi html file with a window.location bit of JS. I feel like URL appends would be too obvious for what I'm doing, ie easily exploitable. Commented Nov 22, 2015 at 16:09
  • @R.Little all client-side data is somehow exploitable and vulnerable. Commented Nov 22, 2015 at 16:15

1 Answer 1

1

You have choices of:

  • Persist/read in a cookie
  • Persist/read in local storage
  • Persist/read in session storage
  • send to server then get it back from the server (likely in some session variable)

Just putting a variable in a JavaScript object does NOT persist past a page refresh. You also can use AJAX to read some HTML portion then apply that to your page in some container (not a full page, just some partial like a <div>my new</div> etc. Stored in some server side file

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

6 Comments

Unfortunately, it seems localstorage only accepts strings. localStorage.setItem('str', '10'); Can you think of a way I could configure the 10 to be more like the parseInt($('#Xdemo').text(), 10); I've given above without it breaking?
@R.Little You need JSON.parse and JSON.stringify
@stm I'm not aware of how to properly use those; however, would a variable work? Something like strChar = parseInt($('#Xdemo').text(), 10); then localStorage.setItem('str', strChar);
@R.Little yep, just consider localStorage like a permanent storage for all your data. Which does not depend on HTML pages.
I think I've gotten it working. I using the above I was able to input a variable on the CS html and the name number showed up on the CSI html.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.