Syncing variables across two separate web pages - javascript

In short, I had a scoreboard application written in HTML and Javascript that contained a timer, home name, guest name, home score, guest score, and period. I was able to make a display webpage without buttons (see image) and a controller webpage with buttons. Using Dropbox Datastores API, I was able to control the display webpage with the controller webpage. Now that the Datastores API is no longer working, I need a different way of syncing the variables across the webpages. Any thoughts on how I could do this? I was thinking about using a database.

If you only want to store the data for the current browser, I'd offer LocalStorage as a solution. Otherwise, yes, sending the data to a database is appropriate.

Related

Record unique views on the web with Firebase Realtime Database

I'm building a React web app, where users can create 'content'. The content is displayed when a certain URL is visited, e.g.: https://myapp.com/username/contentid
The user doesn't have to be signed in to view the content.
My question is, how do I track unique views with Realtime firebase?
I don't necessarily need a code implementation, rather an idea/approach. Thanks!
First, you would need to enable your database to allow for writing capabilities from anonymous users. From there, write to the database when the site is first opened. You could store this information in a variety of different ways, I would recommend posting a timestamp and seeing total unique views by counting the total amount of timestamps uploaded. It may also be important to store locally, via Cookies, if the user has been to the site already. If they have, don't write.

Getting product details from 'add to cart' into view basket

I'm fairly new to web development and I am trying to build a fashion ecommerce site for a project.
I would like a user to be able to chose a product e.g a dress which has associated details like product name, product price, image and size in a page called product.html. I have been able using a separate javascript, to ensure that when a user presses 'add to cart' that the details are logged.
However, how do I then transfer these details to a separate basket.html page and display them?
I'm struggling to understand if I need to use local storage and if so how do I show the details if I'm using a separate javascript file and a another html file.
Essentially, if a user picks a product, how do I get that specific product and details to appear in my separate basket page?
Apologies if this is badly worded or made little sense !
Thank you :)
There are several options to this, depending on how your ecommerce site is built and what parts you have control over.
You could
Submit it to a server and have it respected in the response of the next page.
Hold it locally using webstorage (localStorage or sessionStorage). Keep in mind, that 3rd-party-scripts on your website will be able to read it, too!
Share it with a server by setting a cookie (can be read by 3rd-party-scripts). Keep in mind the limited size of a cookie.
Pass the information along as query parameters. This can have affects on SEO (duplicated content because similiar pages are indexed by a search engine).
Pass information along as hash parameter. Those aren't transmitted to a server, but can be read from JavaScript (yours and 3rd party). It was a hack applied in the early days of Single Page Applications.
You can build REST API which will be used to
store item into cart (called when pressed Add to cart button)
read items from cart (called on Basket page)
The API will persist it in some sort of DB and return when needed.
REST API should be secured (e.g. by OAuth2) so you can distinguish actions for individual users.

Save current page view for sharing

Say I have a java/spring/jsf/jsp web application. User fills all required fields, chooses all the options, clicks generate report, spring beans do their job, database is queried for information, and user is directed to a "report" page generated according to entered information. I am looking for a way to save that page to be accessed later by link - kind of a share current page link. One example of this might be jsfiddle.net where you can enter information, save it and get a shareable link.
What i thought of, having my current knowledge, is saving some kind of url extension hash along with currently displayed page properties to database and query database for that information when someone accesses www.websiteUrl.com/extensionHash but making a query everytime someone accesses the extension seems kind of heavy on performance. Another way could be saving whole html page or just the content part on the server and serve later on request.
What is the most simple/productive way of doing this?
This is one option instead of link :
What you can do is you can load the required data for that report from database when your application starts, put the data in Application Context ( ServletContext in Java ) and whenever you want to get the information, instead of making a database call, you get that from Application Context.( so basically its like you are loading from cache) this way your perfomance is improved.
in java, You can achieve that by implementing a listner class.
Downvoters : please specify the reason.

How to create a table in javascript and hold in memory for use on another page within a web application

I have two html files which are the two pages in my application
Page 1 = Home.html
Page 2 = Stats.html
When Page 1 is loaded, I am making AJAX calls to the Facebook API which returns some data and then I want to build a table using that data.
I then want to keep the table in memory and append it to a div on Page 2 when the user navigates to Page 2.
In this way, the wait time for the user is drastically reduced because in the time it takes them to navigate from Page 1 to Page 2, the majority of the work by the browser has been done.
Stats.html page should look into cached data which is fetched from Home.html. This is technically perfectly possible.
Before I give some details, ensure that the code that fecthes data from Facebook API is the same used between your two pages. The idea is to create a function that:
Looks for cached table data and retrieve it if found
If not found, fetch data from Facebook API and store it in the cache
Return the table data
Remember clearing or overriding the cache time to time.
In order to properly store data, there are two main ways:
Cookies
This is the traditional way to store data across a website. These are sent to your server at each request, which is not actually necessary but still helps you client-side. Cookies are controversial because subjects to many security flaws, so I wouldn't recommend using them.
Local storage
This is more modern in browsers, but less compatible with old browsers. This allows you to store data across a web site. This method is getting more and more common, I think you should use this. On top of that, I recommend using an helper library in order to ease the storage, like store.
More info about web storage at Mozilla's.

Internal web page to retrieve, save and store information?

(I apologize for any incorrect lingo)
I am creating an internal web page as a sort of intranet for me and another associate to use in our department to keep track of information. I have created "pages" using HTML to navigate and saved in our department folder. Doesn't need to be flashy just functional.
I have a table with 5 columns of information for each item we need filled out. I have created a pop-up window and form for these 5 columns to open and the idea is that when the the user (me) fills the form out and clicks the submit button, the information is transferred to the parent page, saved and stored for later tracking.
I'm assuming this isn't possible by just saving .html files into our network folders. I think i might need a database to "save" the information the user filled out.
I wouldn't necessarily need the window pop-up..
Is this way over my head?
You would at least need a server side language such as PHP. Using a Database is highly recommended.
In my very humble opinion - Yes, it does sound as if this is over your head right now.
Recommended readings:
http://www.amazon.com/s/ref=nb_sb_ss_c_0_3?url=search-alias%3Dstripbooks&field-keywords=php&sprefix=php%2Caps%2C129
Let me know if my answer is helpful.

Categories