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.

Answer 1

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)

Answer 2

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

Answer 3

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?

Answer 4

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

http://html5demos.com/storage-events

Answer 5

<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