How to pass variable value between different html pages in javascript

Question

I want to pass the value of selected list item to the other page,means if I m selecting abc from the list then this abc value passes to the next html form and it should open that profile page only.Is there any way that I can use this variable among different html page.

$('.ui-li-icon li').click(function() {
    var index = $(this).index();
    text = $(this).text();
    alert('Index is: ' + index + ' and text is ' + text);

I want to pass the above text value to my profile.html which is having javascript function profile().So I want to pass this text in function call like profile(text);I tried declaring var text above the function call but still its not working.Pls tell me if any other way is there.

Have a look at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage — mguimard, Apr 22 '14 at 08:02
in another profile.html i have included this profile.js and in profile.js it contains function profile(text){}; — user3415421, Apr 22 '14 at 08:06
Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — Liam, Dec 18 '17 at 15:31

score 23 · Accepted Answer · answered Apr 22 '14 at 08:14

You can pass the value as a url fragment.

In your on click function, open '/profile.html#'+text

In your profile.html get the url fragment.

Sample code:

To navigate to profile.html

window.location.href = '<path to profile.html>' + '#' + text;

In profile(), to get the parameter, use

var text = window.location.hash.substring(1)

Fizer Khan · Answer 2 · 2016-12-07T10:02:41.020

10

There are different ways to do it

Store the selected item in the cookies

 // Store it in the cookies
 document.cookie="selected=john"

// Get it in the profile.html
var cookie = document.cookie;

Store the selected item in the local storage

// Store it in the local storage
localStorage.setItem('selected', 'john');

// Get it from the local storage
var selected = localStorage.getItem('selected');

Use query parameter(Recommended)

You can pass the selected item in query parameter of profile.html?selected=john. I recommend this method. You can read the selected item by location.search

edited Dec 07 '16 at 10:02

answered Apr 22 '14 at 08:11

Fizer Khan

88,237
28
143
153

You can also get the query parameter [from the previous page](https://stackoverflow.com/questions/19884803/query-string-of-referrer-url) using `document.referrer`. – Anderson Green Jun 09 '21 at 23:45

score 5 · Answer 3 · edited May 23 '17 at 12:26

HTML / HTTP is stateless, this means that, what you did / saw on the previous page, is completely disconnected with the current page.

1) - Simple using Front End Storages, which equips any Browser (Cookie, Session Storage, Local Storage) and put value in one page and get value in others.

Considering that:

Cookie saves data until what time you have determined,

Session Storage saves data until the browser default tab closed

Local Storage saves data until Browser completely closed and shares this data between tabs (pages) It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.

2) –Second way saving this as a request param - Add attributes to the element when it generated via Ajax render function a link another link

-> and after click this element construct “ URL / ? action=getAll & element=product & id=1212 “ and in second page which will be gone action you can parse this URL and call appropriate Ajax with appropriate parameters.

May be this additional information will helpful too

How to pass javascript object from one page to other

additional information about "Client storage solution"

What is the difference between localStorage, sessionStorage, session and cookies?

score 2 · Answer 4 · answered Apr 22 '14 at 08:10

<form action="profile.html" method="GET">
   <input type="text" id="something" name="something">
   <input type="submit" value="Send" name="submit" id="submit">
</form>

this will redirect the page to profile.html with params as ?something=textishere

this will be the url formed : /profile.html?something=textishere&submit=Send"

then you can get the parameters at this page using

location.search

score 1 · Answer 5 · answered Apr 22 '14 at 08:09

1

You can use localStorage events to pass values between web pages, as shown in this demo:

http://html5demos.com/storage-events

answered Apr 22 '14 at 08:09

wong2

34,358
48
134
179

How to pass variable value between different html pages in javascript

5 Answers5

Linked

Related