1

I have two HTML pages. After entering few inputs users will be redirected from first page to second page. Before redirecting the user to second HTML page(using window.location="new HTML URL"), I persist few of the user inputs in cookie using document.cookie DOM API.

When I am in the second HTML page, I could not retrieve the value from this cookie. I think since document object would have changed in the new HTML page, my cookie values become inaccessible.

Can someone tell me: how do I retrieve the value from a cookie persisted by one javascript in one HTML page in other HTML page i.e cookie written by HTML A's javascript in HTML B's javascript?

I don't have any server-side code, so I could not take advantage of server-side logic. Also I am not supposed to pass the values in URL. So I need a solution on plain javascript and HTML.

If some one has a better solution please let me know. Thanks

Martijn
  • 13,225
  • 3
  • 48
  • 58
user131476
  • 422
  • 7
  • 20
  • You can't use anything like ASP, PHP, or JSP? Those will fix this problem. Period. – Tanner Ottinger Mar 22 '11 at 13:36
  • As long as domain and path are not changing, and you're not setting too short (or negative) an expiration date, there should be no issue in setting on one page and reading via another. Please give us some info about the two pages such as domain and path, as well as some code you're using for read/write of cookies. I have maintained an open source JavaScript cookies library since 2005, so I should be able to help you with decent info. – JAAulde Mar 22 '11 at 13:38
  • 2
    @Tanner Ottinger - "Those will fix the problem. Period" doesn't make a lot of sense. The same restrictions apply to cookies regardless of code source/origination. Further, you offer no explanation as to how one of those server platforms would fix the problem. – JAAulde Mar 22 '11 at 13:39
  • I meant that having those to work with will help a *lot*, Javascript isn't going to compare to those languages when it comes to cookies. They have more built in support for handling multi-page data. In PHP, setting a cookie is a single function, and getting a cookie is just getting it out of the global array, `_COOKIE`. In Javascript, you must extract it from the cookie string. – Tanner Ottinger Mar 22 '11 at 13:42
  • What are the URLs? If they do not have the same domain, then you won't be able to share cookie values between the pages. @Tanner Ottinger your comments really make no sense; what the OP wants to do is perfectly reasonable **if** his pages are from the same domain. – Pointy Mar 22 '11 at 13:43
  • @Tanner Ottinger while their APIs may be a bit simpler to work with, JS in the browser provides full cookie manipulation ability. Especially when both reading and writing from script (as opposed to trying to read something via script which set from another source) – JAAulde Mar 22 '11 at 13:48
  • @JAAulde - You are right. My HTML pages belong to two different application i.e. WARs. I followed this [link] (http://www.elated.com/articles/javascript-and-cookies/) for reading and writing cookies. – user131476 Mar 22 '11 at 13:51
  • I was just saying that server-side languages would make this easier. – Tanner Ottinger Mar 22 '11 at 13:53

2 Answers2

3

try to use localStorage instead of cookies, 

// set your values in the first page
localStorage.setItem('itemKey', 'values');

// on the second page, retrieve them
var values = localStorage.getItem('itemKey');

you can use a jStorage plugin for cross browser behaviour.

also refer to this question for storing objects instead of strings

Community
  • 1
  • 1
Anas Nakawa
  • 1,977
  • 1
  • 23
  • 42
  • I assume localStorage is a HTML5 solution. Am I correct? Our standard browser does not support HTML5. Will this solution work in such case also? – user131476 Mar 22 '11 at 14:05
  • the concept is there with non-HTML5 browsers (IE for example), but with different implementations, you can still use the jStorage plugin as an interface, and it will handle the storage for you, if you refer to their site, they mentioned that IE7 & IE6 can store values up to 128kb if that helps – Anas Nakawa Mar 22 '11 at 14:10
  • I tried jstorage. I added a key-value pair to jstorage using this link http://www.jstorage.info/test?type=prototype. I created another HTML page with a button and attached a javascript function which would return the value based on the key. This the content of my javascript function. var value = $.jStorage.get("test");alert(value); But alert box shows null. Am i doing something wrong? I am using jstorage.js and prototype.js in my HTML page. – user131476 Mar 23 '11 at 10:02
  • @user131476 the link you are using is just for demonstration issues, you have to use $.jStorage.set('test', 'your value') in the first page, not using that link you mentioned, and in the other page use what you already did $.jStorage.get("test"), and your value should be retrieved. – Anas Nakawa Mar 23 '11 at 12:13
1

JAAulde is on point with his answer.

For what the OP is trying to do something like PHP would be great, in that case I wouldn't bother with cookies in order to just pass data between two pages, that's just silly. However, if true persistence was needed and the data requirements were simple cookies would be the way to go even while using a language such as PHP.

Those are rather draconian constraints, is this a class project? That said there aren't any other ways to do what you're attempting, save for an ugly and highly insecure hack of the DOM.

bitbandit
  • 409
  • 5
  • 10