Jump to content

Javascript .onchange + localStorage?


ava_barbilla

Recommended Posts

I am currently trying to find out a way to automatically store the previous price of an item before it gets updated. For instance, if on my website I show the currency exchanges let it be USD to EURO and I only get the real time exhange price, how can I use javascript to display the previous value in one line and display the updated value in another line. This is an example code, assuming that the random number is the exchange price between the currencies.

 

Markup:

 

<p id="price"></p><p id="previous"></p>

 

JavaScript:

 

<script>var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;</script>

 

In this case scenario, a random number appears and it is for example 1.11. Afterwards, I refresh the page, the script runs again and the random number changes to 1.43. I want to display the new random number which is 1.43 under #price and the old (or previous) random number which in this case was 1.11 under #previous. How can I use JavaScript to do so?

 

I have done some research and got some clues like using .onchange or localStorage under the script.

Link to comment
Share on other sites

To be honest, I have no idea on how to assign event handlers, however, I do have some knowledge about localStorage. I have been trying out some code since some days and it looks like this:

 

<p id="price"></p><p id="previous"></p><script>var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;localStorage.previous = price;document.getElementById("previous").innerHTML = localStorage.previous;</script>

 

This code does not work. I am finishing highschool and do javascript as part-time learning as it is simply lots of fun. I have been using javascript no for 6 months and know my way around but am not an expert. What do you propose to confront this problem?

 

Best regards!!

Link to comment
Share on other sites

The problem with localStorage and sessionStorage out of my understandgin is that data is permanentyl stored, so once I refresh the page the script using local storage will always put in the recent value. What I want to do is once the page is refreshed, insert the new random number under #price and old random number (which was the random number that appeared before I refreshed the page) under #previous. This cycle continues on for every page refresh. Something similar to excel VBA:

 

http://stackoverflow.com/questions/4668410/how-do-i-get-the-old-value-of-a-changed-cell-in-excel-vba

 

This is just like when you watch the news and the stock prices appear with a section called previous. Under previous appears the price of the stock before it either increased or decreased. Those firms also use some type of scripts to record the prices and show under the previous section the value of the stock one record before. I want to apply this using a random number. Would you be able to provide any demo? I would really appreacite it!!

 

Many thanks!!!!

Link to comment
Share on other sites

There are examples right on the localStorage page at MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

 

In your case, what you have to do is first show the value of the stored data and then change it after.

// First show the stored valuedocument.getElementById("previous").innerHTML = localStorage.getItem("previous");// Then change itvar price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;localStorage.setItem("previous", price);
  • Like 1
Link to comment
Share on other sites

There is a last issue I have come up with. I think this is were .onchange() comes into play. The above script works perfectly fine, always refreshing the random number, showing the old random number and so forth. What function could I use when the value under price is not a random number. For instance, take the stock market. The value under price changes so this number is stored and when I refresh the page again this vale appears under previous, PERFECT! Now, what if the value under price does not change? The script regarding localStorage is still executed on page refresh and will always store the value that appears under price. This means, that is the number has not changed it will sotre the unchanged value and then eventually both #price and #previous will be the same. Here is what I mean:

 

One case scenario:

 

Page refresh

 

#price = 1.3

#previous = 1.56

 

Page refresh

 

#price = 1.45

#previous = 1.3

 

Page refresh

 

#price = 1.14

#previous = 1.45

 

PERFECT UP TO HERE! :D

 

Second case scenario:

 

Page refresh

 

#price = 1.26

#previous = 1.14

 

Page refresh

 

#price = 1.9

#previous = 1.26

 

Page refresh

 

#price = 1.9 <======= The price here remains unchanged

#previous = 1.9

 

What I want to do is for this last page refresh, is that if the number remains unchanged, to not run the localStorage.setItem. The last page refresh would look like this:

 

Page refresh

 

#price = 1.9

#previous = 1.26

 

Many thanks again for the support!!

Link to comment
Share on other sites

Assuming that the random number will not change for 5 page refreshes or for x amount of time, something like this?? <p id="price" onchange="myFunction()"></p><p id="previous"></p><script>document.getElementById("previous").innerHTML = localStorage.getItem("previous");var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;function myFunction() {localStorage.setItem("previous", price);}</script>

Link to comment
Share on other sites

You'll need yet another localstorage variable to remember which value it had two iterations before. Then when you generate the current price you need to compare it to the previous one to decide which value to show.

 

Onchange does not work like that. The onchange event fires when a user changes the value of a form element.

Link to comment
Share on other sites

LocalStorage isn't all that different than just regular variables, instead of using variable names you getItem and setItem. Otherwise, it's just a collection of named values like other variables. If you can do the algorithm with regular variables (which wouldn't survive a page refresh), you should be able to do the same with localStorage. If you post your code we can point out where you're going wrong.

  • Like 1
Link to comment
Share on other sites

This is my code:

 

<p id="price"></p><p id="previous"></p><script>document.getElementById("previous").innerHTML = localStorage.getItem("previous");localStorage.setItem("beforeprevious", localStorage.getItem("previous");if( document.getElementById("price").innerHTML == document.getElementById("previous").innerHTML) {document.getElementById("previous").innerHTML = localStorage.getItem("beforeprevious");}var price = Number(6);document.getElementById("price").innerHTML = price;localStorage.setItem("previous", price);</script>

 

I do not know why nothing appears :facepalm: Thank you again for your support

Link to comment
Share on other sites

Ok, I finally found the solution and followed your advices. This is my code:

 

<p id="price"></p><p id="prev"></p><script>document.getElementById("prev").innerHTML = localStorage.getItem("prev");var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;var prev = document.getElementById("prev").innerHTMLif (price == prev) {document.getElementById("prev").innerHTML = localStorage.getItem("beforeprev")}// Save previous to the one before & Save price to the previous valueif (price != prev) {localStorage.setItem("beforeprev", prev);localStorage.setItem("prev", price);}</script>

 

What effect will this have? I mean, if I insert this script into my website for instance, as a server side code will everyone who visits my site be able to view the current price and the previous as my server has already stored the data? or does this depend on the clients browser and for everyone who visits my site the process wil start over again? Will the data be permanently stored? My enormous gratitude to you guys your tips really helped me!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...