Develop Reference

HTML & Javascript text changing

i was wondering how i could do the following:
I get the input from the user using form(okay fine)
i take that input and store it as a variable in javascript(got it).
The variable i just saved changes the text of another page in the website (it permanently changes the text of that webpage and isn't depended on the js variable of that file anymore(it can also import the text into the web page if need be if possible))
for eg:- enter image description here
Here the user enters the details let's say the name for now
and then in the second img the text of the website changes, and when i download the second img website which doesn't hold the original js which stored the variable, it still shows the text as it might have stored the text in the file locally using js or something.
[2]: https://i.stack.imgur.com/4nZCD.png
Please help me out.

In my experience, the best way to store information from page-to-page is through local storage.
Local storage persists from page to page, while JavaScript variables are cleared out, and cookies can be un-reliable based on the response from the server they are sent too.
In your function that takes the user input, write something along the lines of:
localStorage.setItem('myCat', 'Tom');
And to retrieve this information, you can reference it like:
const cat = localStorage.getItem('myCat');
Here is a reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

How to store a variable value obtained in home page across all pages?

I am using jquery to fetch inner html value of a div in home page, and I want this value to be accessible in all pages. The problem i'm facing is that the div from which i'm getting the value is present only in home page, so when the script runs in other page, the value will be undefined as the div is not present.
The issue is, they are displaying a message in bottom of home page and we want it to be displayed in top part of all pages. so I used jquery to extract the text content and display it in top part, but when we go to other pages, the script fails as the bottom of that page wont have the message.

store it in a local storage:
localStorage.setItem('myItem', myValue);
and then you could Access this item on all pages
var item = localStorage.getItem('myItem');
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage

You can use web storage objects like: sessionStorage or localStorage,
but be careful with the data you store, which determines which method to use.
Data in sessionStorage is cleared when the page session ends.
Data stored in localStorage has no expiration time.

You can use Window localStorage Property as solution to your problem. Another option is sessionStorage. It depends what you trying to achieve. Look at the definition for both of them and use appropriate.

Saving the Dynamically Changed HTML

I have done some changes in HTML page dynamically by using jQuery. And if I reload the same HTML it will gets to its initial state. But i don't want that to happen. Is there any way to get it done or save the changes made using jQuery?
Thank you.

If you wish to make changes to a file using jQuery and load it back on the reload you need to use a database in order to save those changes. You can use AJAX or even pure JavaScript to transfer those changes from your form to the database.
And once the changes are saved you can use a combination of PHP, MySQL query and JavaScript or AJAX to dynamically load the changes from the database on to your HTML page or if you want to make it more simple then just use a JavaScript function on page reload to fire a PHP code which will check for changes and if there is any, those will be loaded on to your page.
HTML5 local storage is a temporary solution this will also get retested once you close your browser or clean the browsing data.

You would need to get the innerHTML string and save it to the database or via HTML5 localStorage.
Then onload, all you have to do is check for an existing page state and then insert that as an innerHTML to your parent container:
if(savedState){
myParentContainer.innerHTML = savedState;
}
Where savedState is the variable that holds your html code.
To save the state, you would need to design a save function that would fire every time changes are made or when the user clicks on a save button. As I have said, you can save via HTML5 LocalStorage or via a database. Be wary that HTML5 LocalStorage is very small and can only accommodate several megabytes.

You must need to save your HTML after made changes using Jquery. you could save it by ajax call and save into database. so when you reload page HTML fetches from database so it would work.

Fill textbox on page with localStorage key value from options page?

I am making an autofill extension. On the options page, the user enters info such as name & email. Then it is saved to the localStorage. Now, what I would like to do is have the value of one of the keys in the localStorage to be the text inputted in a textbox on a specific page. I assume you do this by using a background page. How would I go about doing this? Is there a better way of doing this?

You shouldn't need a background page. The easiest way is to use chrome.storage instead of localStorage to save the options. You can then access the information from a content script, which is the only way to access and modify the DOM of a web page.

On the page you want to show it
function LoadText(){
var name = window.localStorage.getItem("name");//name
var email = window.localStorage.getItem("email");//name
$('#myname').val(name);
$('#myemail').val(email);
}
Call the function and it will load

Recover page content when visiting back

I am building a small web site, and on one of the pages there is a d3.js/highchart visualization demo. The visualization is interactive, and can be modified by the user.
When the user leave this page and enter another html page by following a link in this demo page, the content of the page is not saved, and when he comes back, he has to modify the chart again. My question: is there any way to cache this demo page so that as long as the user does not close the browser page, it can be recovered?
My simplest idea is to have each client page a unique ID. So that I will save the status of the page when the user leaves, and when he comes back I can cover its content based on this ID. Then the question is how to implement this ID for client pages.

You can use History API here.
When a user changes the state of the chart, the page URL is updated with all the parameters needed for rendering the chart (via history.pushState call).
On page load you get the initial state (chart parameters) from the url and render the chart correspondingly.
A good thing with that approach is that you even can send such URL to another person, and they will see just the same customized chart.

You could also try storing the page state locally using either sessionStorage or localStorage (DOM Storage guide)

If you have two or more tabs I don't think there is a way to differentiate between then once they are closed. I would use Steve's idea about storing the ID in DB+cookie and when user come back to page I would provide them with a list of all their past modified charts based on cookie and DB query. Then they can choose which chart they want to reopen.

I can think of many ways to do something like this.
If it was me, I would simply store the users chart settings in a cookie, so when they navigate back to the page, you can simply read the cookie for the settings and use them to re-display the chart.
If you want to persists this longer, then send the settings to the server to be stored in a DB. The server can return a unique ID which is then stored in a cookie, or simple use the session cookie to associated the chart settings with a session.
An alternative which doesn't use cookies is to add chart settings to the 'back' url when you navigate away. When the user clicks to go back, the url contains the information necessary to restore the chart states. However, this doesn't work if they click the browser back button.